I have a really simple program where I try to hook up a store to an Ext.panel.Grid. I can't seem to get the Ext.data.StoreManager.lookup() in my Main.js call to return anything other than 'undefined.' Ext.create('LeaveRequestGrid.store.LeaveRequestStore') seems to work (with some warnings), but I want to know what the correct way is to do this.

LeaveRequestStore.js:

Ext.define('LeaveRequestGrid.store.LeaveRequestStore', {
    extend: 'Ext.data.Store',
    storeId: 'leaveRequestStore',
    autoLoad: true,
    fields: [
        'dateCreated',
        'startDate',
        'endDate',
        'leaveType',
        'totalHours',
        'approver',
        'status'
    ],
    data: {
        'leaveRequest' : [
            {   
                'dateCreated': '12/01/2013' ,
                'startDate' : '01/01/2014',
                'endDate' : '01/02/2014' ,
                'leaveType' : 'Paid Admin Leave' ,
                'totalHours' : 16 ,
                'approver' : 'John Smith' ,
                'status' : 'Pending' 
            },
            {   
                'dateCreated': '01/01/2014' ,
                'startDate' : '02/01/2014',
                'endDate' : '02/02/2014' ,
                'leaveType' : 'Vacation' ,
                'totalHours' : 16 ,
                'approver' : 'John Smith' ,
                'status' : 'Pending' 
            },
            {   
                'dateCreated': '02/01/2013' ,
                'startDate' : '03/01/2014',
                'endDate' : '03/02/2014' ,
                'leaveType' : 'Paid Time Off' ,
                'totalHours' : 16 ,
                'approver' : 'John Smith' ,
                'status' : 'Pending' 
            }
        ]
    },
    proxy: {
        type: 'memory',

        reader: {
            type: 'json',
            root: 'leaveRequest'
        }
    }
})

Main.js:

Ext.define('LeaveRequestGrid.view.Main', {
    extend: 'Ext.container.Container',
    requires:[
        'Ext.grid.Panel',
        'LeaveRequestGrid.store.LeaveRequestStore'
    ],

    xtype: 'app-main',

    layout: {
        type: 'fit'
    },

    items: [
        {
            xtype: 'grid',
            title: '<div style="text-align:center">Leave Requests</div>',
            //store: Ext.create('LeaveRequestGrid.store.LeaveRequestStore'),
            store: Ext.data.StoreManager.lookup('leaveRequestStore'),
            columns: [
                {text: 'Date Created', dataIndex: 'dateCreated', flex: 1},
                {text: 'Start Date', dataIndex: 'startDate', flex: 1},
                {text: 'End Date', dataIndex: 'endDate', flex: 1},
                {text: 'Leave Type', dataIndex: 'leaveType', flex: 1},
                {text: 'Total Hours', dataIndex: 'totalHours', flex: 1},
                {text: 'Approver', dataIndex: 'approver', flex: 1},
                {text: 'Status', dataIndex: 'status', flex: 1}
            ]
        }
    ]
});

I have a really simple program where I try to hook up a store to an Ext.panel.Grid. I can't seem to get the Ext.data.StoreManager.lookup() in my Main.js call to return anything other than 'undefined.' Ext.create('LeaveRequestGrid.store.LeaveRequestStore') seems to work (with some warnings), but I want to know what the correct way is to do this.

LeaveRequestStore.js:

Ext.define('LeaveRequestGrid.store.LeaveRequestStore', {
    extend: 'Ext.data.Store',
    storeId: 'leaveRequestStore',
    autoLoad: true,
    fields: [
        'dateCreated',
        'startDate',
        'endDate',
        'leaveType',
        'totalHours',
        'approver',
        'status'
    ],
    data: {
        'leaveRequest' : [
            {   
                'dateCreated': '12/01/2013' ,
                'startDate' : '01/01/2014',
                'endDate' : '01/02/2014' ,
                'leaveType' : 'Paid Admin Leave' ,
                'totalHours' : 16 ,
                'approver' : 'John Smith' ,
                'status' : 'Pending' 
            },
            {   
                'dateCreated': '01/01/2014' ,
                'startDate' : '02/01/2014',
                'endDate' : '02/02/2014' ,
                'leaveType' : 'Vacation' ,
                'totalHours' : 16 ,
                'approver' : 'John Smith' ,
                'status' : 'Pending' 
            },
            {   
                'dateCreated': '02/01/2013' ,
                'startDate' : '03/01/2014',
                'endDate' : '03/02/2014' ,
                'leaveType' : 'Paid Time Off' ,
                'totalHours' : 16 ,
                'approver' : 'John Smith' ,
                'status' : 'Pending' 
            }
        ]
    },
    proxy: {
        type: 'memory',

        reader: {
            type: 'json',
            root: 'leaveRequest'
        }
    }
})

Main.js:

Ext.define('LeaveRequestGrid.view.Main', {
    extend: 'Ext.container.Container',
    requires:[
        'Ext.grid.Panel',
        'LeaveRequestGrid.store.LeaveRequestStore'
    ],

    xtype: 'app-main',

    layout: {
        type: 'fit'
    },

    items: [
        {
            xtype: 'grid',
            title: '<div style="text-align:center">Leave Requests</div>',
            //store: Ext.create('LeaveRequestGrid.store.LeaveRequestStore'),
            store: Ext.data.StoreManager.lookup('leaveRequestStore'),
            columns: [
                {text: 'Date Created', dataIndex: 'dateCreated', flex: 1},
                {text: 'Start Date', dataIndex: 'startDate', flex: 1},
                {text: 'End Date', dataIndex: 'endDate', flex: 1},
                {text: 'Leave Type', dataIndex: 'leaveType', flex: 1},
                {text: 'Total Hours', dataIndex: 'totalHours', flex: 1},
                {text: 'Approver', dataIndex: 'approver', flex: 1},
                {text: 'Status', dataIndex: 'status', flex: 1}
            ]
        }
    ]
});

• javascript
• extjs
• extjs4.2

• Have you tried defining store using string name of store in grid? ie. store:'LeaveRequestStore' – weeksdev Commented Jan 1, 2014 at 18:11
• Additionally stores are usually defined on the app? is your app named LeaveRequestGrid? – weeksdev Commented Jan 1, 2014 at 18:53
• The app is named LeaveRequestGrid. The store name is LeaveRequestStore. – Android Noob Commented Jan 2, 2014 at 1:49

1 Answer 1

I figured it out.

You define your stores: ['LeaveRequestStore'] in Application.js. Then, in Main.js (or whatever file your gridpanel is in), you simple say store: 'LeaveRequestStore'. That's it. No need to call Ext.getStore('LeaveRequestStore') or Ext.data.StoreManager.lookup('LeaveRequestStore'). when referencing a store in the store property.