Extjs - getting 'TypeError: name is undefined' when add grid panel with store data in view

Question

I am trying to simply load a grid panel with data from a store in my view, but I keep getting the following error:

TypeError: name is undefined
Line: if (name === from || name.substring(0, from.length) === from) {

I have experimented with how I am initializing the panel, here is what I have currently:

Ext.define('BP.view.induction.RightPage', {
extend: 'Ext.tab.Panel',
alias : 'widget.rightpage',

title: "Right Page",    

items: [
    {
        title: 'Tasks',
        html: '',
        cId: 'tasksTab',
        initComponent: function() {
            this.add( [{
                store: 'Tasks',
                xtype: 'taskgrid',
                hideHeaders: true,
                columns: [
                    {
                        text     : 'Task ID',
                        flex     : 0,
                        sortable : false,
                        hidden   : true,
                        dataIndex: 'id'
                    }, 
                    {
                        text     : 'Task',
                        flex     : 1,
                        sortable : false,
                        dataIndex: 'name'
                    },

                ]
            }]);

            this.callParent();
        } 
    },{
        title: 'Content',
        html: '',
        cId: 'contentTab'
    }
]
});

Originally I didn't have the initComponent function, instead building items immediately - but this produced the same error.

[Edit] As requested, here is the store definition:

Ext.define('BP.store.Tasks', {
extend: 'Ext.data.Store',
requires: 'BP.model.Task',
model: 'BP.model.Task',
proxy: {
    type: 'ajax',
    url : '/resources/data/tasks.php',
    reader: {
        type:'json',
        root:'tasks'
    }
},
autoLoad: true
});

The full data is unwieldy, but here is a sample (json formatted):

{"success":true,
"tasks":[
    {"id":1,"name":"Cleaning Products","content":"Lorem ipsum...","resource_type":"text","resource_url":"","category_id":1},
    {"id":2,"name":"Preservatives","content":"Lorem ipsum...","resource_type":"text","resource_url":"","category_id":1}]
}

Answer 1

initComponent goes into class definition. in your code sample you are creating a tab panel with a generic Tasks panel to whcih you are trying to set an initComponent method. If you need that initComponent method you then need to create a separate class definition for your Tasks grid. You can't inline it.

In addition, what you are doing is overnesting panels. If you add a gridpanel to a tabpanel it automatically becomes one of the Tabs. You don't need to wrap a grid into another panel.

On debugging: make sure to use a debug version of the ExtJS lib (or the dev version). Use FF or Chrome to debug (whichever you like more). If you use FF, do get firebug addon called Illuminations for Developers - it helps tremendously with layout issues and to understand containerships and nesting issues. It also lets you see records in your store after they are loaded from server.