extjsextjs-mvc

how to get store alias into extjs handler in view layer


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?


Solution

  • 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();