Question

I am a beginner in Ext library, I am trying to extend a grid panel and referencing its store from one of my new class records:

Ext.define('App.ui.CategoryGridPanel', {
extend : 'Ext.grid.Panel',
initComponent : function() {
    var storeToUse = this.store;

    if (storeToUse == null) {
        storeToUse = Ext.data.StoreManager.lookup(StoreIDs.CategoryStore);
    }

    this.categoryRowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit : 2,
        store : storeToUse,
        listeners : {
            edit : function(editor, e) {
                this.store.sync();
            }
        }
    });

    Ext.apply(this, {
        store : storeToUse,
        height : 400,
        width : 300,
        plugins : [ this.categoryRowEditing ],
        columns : [ {
            header : 'Description',
            dataIndex : 'description',
            flex : 1,
            sortable : true,
            editor : 'textfield'
        } ],
        tbar : [ {
            xtype : 'button',
            text : 'New',
            handler : this.insertNewCategory
        } ]
    });

    this.callParent(arguments);
},
/**
 * Add new Category to grid.
 */
insertNewCategory : function() {
    var category = Ext.create(ModelNames.Category, {
        description : ''
    });

    this.store.insert(0, category);
    this.categoryRowEditing.startEdit(0, 0);
}

});

the method inserNewCategory always throw can not call insert of undefined
after putting some alerts I found that this.store returns null.
I checked Ext sample codes, but I do not do anything different.

Please help 🙁

Answer 1

1. Check what you see as this in your insertNewCategory method. You will be surprised. My bet – it will be button you’re pressing, because you didn’t do anything about scope of this function.

2. Read Sencha guides and walk-through. From your code sample it’s clear you are using it in a completely wrong way – you don’t need to do all this manual work to assign and re-assign store – this is all handled by ExtJs automatically.