I am new to extjs I am trying to write an example for extjs mvc. If I write the mvc in one file app.js, it is working fine but if I separate to differtent file(model, view and controller) then the data is populating but the eventlisteners is not working: Below is my store js:
Ext.define('Crud.store.Product',{
extend: 'Ext.data.Store',
alias:'widget.pStore',
model: 'Crud.model.Product',
autoLoad: true,
autoSync: true
});
and the problem is in view js:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
Ext.define('Crud.view.Main',{
extend: 'Ext.grid.Panel',
renderTo: document.body,
plugins: [rowEditing],
width: 400,
height: 300,
frame: true,
title: 'Products',
alias:'pGrid',
store: 'Product',
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id'
}, {
text: 'Name',
flex: 1,
sortable: true,
dataIndex: 'name',
field: {
xtype: 'textfield'
}
}, {
header: 'Price',
width: 80,
sortable: true,
dataIndex: 'price',
field: {
xtype: 'textfield'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function() {
// empty record
store.insert(0, new Product());
rowEditing.startEdit(0, 0);
}
}, '-', {
text: 'Delete',
iconCls: 'icon-delete',
handler: function() {
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
in grid.getView().getSelectionModel().getSelection()[0]
, it is saying grid is not defined and same for store not defined in store.insert(0,new Product())
.
In single js file if I create variable like below it works fine.
grid=Ext.create('Ext.grid.Panel',{
//view code
}
and store= Ext.create('Ext.data.Store',{
//store code
}
Could you help me how can I get the store and grid object?
You have to go to the grid from the button that is clicked (first parameter of handler), and from there to store:
handler: function(btn) {
var grid = btn.up('grid'),
store = grid.getStore();