Grid data not being displayed in ExtJs app [closed] - extjs

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I'm using ExtJs 4.1.0 and I'm trying to display a grid of data backed by a remote json store. When I render the grid like so:
Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath({
'Grip':'app'
,'Ext.ux':'ext/examples/ux'
});
Ext.require([
'Grip.view.EditableGrid'
,'Grip.store.UYNMeetingTypes'
,'Grip.view.UYNMeetingGrid'
,'Grip.model.UYNMeeting'
,'Grip.store.UYNMeetings'
,'Ext.ux.CheckColumn'
]);
Ext.require([
'Ext.panel.*',
'Ext.toolbar.*',
'Ext.button.*',
'Ext.container.ButtonGroup',
'Ext.layout.container.Table',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function() {
var store = new Grip.store.UYNMeetings();
grid = new Grip.view.UYNMeetingGrid({
store: store
,renderTo: Ext.getBody()
});
store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
});
it works fine. However, when I try to link things up using the manner suggested in the MVC tutorial (http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/) I can't seem to get my data to display. I'm running ExtJs 4.1.0 on Google Chrome 20.0.1132.47. Any ideas?
I tried to post only the minimally relevant bits of code (though it still seems like a lot). Let me know if there's anything I can clarify. Any help would be greatly appreciated. Thanks!
Grip.controller.UYNMeeting:
Ext.define('Grip.controller.UYNMeeting', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'meetingGrid',
selector: 'uynmeetinggrid'
}],
stores: ['UYNMeetings','UYNMeetingTypes'],
init: function() {
},
onLaunch: function() {
var meetingsStore = this.getUYNMeetingsStore();
meetingsStore.load({
callback: this.onMeetingsLoad,
scope: this
});
var meetingTypesStore = this.getUYNMeetingTypesStore();
meetingTypesStore.load({
callback: this.onMeetingTypesLoad,
scope: this
});
},
onMeetingsLoad: function() {
},
onMeetingTypesLoad: function() {
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
Grip.view.UYNMeetingGrid:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
Ext.define('Grip.view.UYNComboBox', {
extend:'Ext.form.field.ComboBox'
,alias:'widget.uyncombo'
,stores:['UYNMeetingTypes']
})
Ext.define('Grip.view.UYNMeetingGrid', {
extend:'Ext.grid.Panel'
,alias:'widget.uynmeetinggrid'
,stores:['UYNMeetings']
,title:'UYN Meetings Grid'
,hideHeaders: true
,bodyPadding:5
,width:550
,height:400
,autoScroll: true
,initComponent:function(){
this.columns = [{
"width": 150,
"text": "Name",
"sortable": true,
//"id": "name",
"dataIndex": "name",
editor: {
allowBlank: false,
xtype: 'textfield'
}
},
{
"width": 150,
"text": "Org.",
"sortable": true,
//"id": "org",
"dataIndex": "org",
editor: {
allowBlank: true,
xtype: 'textfield'
}
},
{
"width": 100,
"text": "Date",
"sortable": true,
//"id": "date",
"dataIndex": "date",
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
maxText: 'Cannot have a meeting date in the future!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
},
{
"width": 75,
"text": "Meeting Type",
"sortable": true,
//"id": "meeting_type",
"dataIndex": "meeting_type"/*,
editor: {
xtype: 'uyncombo'
}*/
},
{
"width": 75,
"text": "Num Hours",
"sortable": true,
//"id": "num_hours",
"dataIndex": "num_hours",
editor: {
allowBlank: false,
// step: '.1',
xtype: 'numberfield'
}
}];
this.dockedItems = [{
dock:'bottom'
,xtype:'toolbar'
,items: [{
xtype:'button'
,text:'New'
,action:'newuynmeeting'
}, {
xtype:'button'
,text:'Edit'
,action:'edituynmeeting'
}, {
xtype:'button'
,text:'Remove'
,action:'removeuynmeeting'
}]
}];
this.callParent();
}
,plugins: [rowEditing]
,listeners: {
'selectionchange': function(view, records) {
// grid.down('#removeEmployee').setDisabled(!records.length);
}
}
});
Grip.view.Viewport:
Ext.define('Grip.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
requires: [
'Grip.view.ContactsPanel'
,'Grip.view.UYNMeetingForm'
,'Grip.view.UYNMeetingGrid'
,'Grip.view.NavBar'
],
renderTo: 'app',
tbar:{
xtype:'mynavbar'
},
items:[{
xtype:'tabpanel',
items:[{
title:'Contacts',
xtype:'tabpanel',
items:[{
title:'Contacts'
,xtype:'contactspanel'
},{
title:'Add Contact'
,html:'TODO: Add content'
}
]
},{
title:'UYN',
xtype:'tabpanel',
items:[{
title:'UYN Meetings'
//,html:'Foo'
,xtype:'uynmeetinggrid'
}]
}]
}]
});

Answer 1

I don't know if it's a typo, but a grid doesn't have a stores config - it can only display the data of one store, thus it has a store config (singular, not plural)