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 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With