ExtJs 4.1.0を使用していて、リモートのjsonストアに基づくデータのグリッドを表示しようとしています。グリッドを次のようにレンダリングすると、次のようになります。
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
});
}
});
});
それはうまくいきます。ただし、MVCチュートリアル(http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/)で提案されている方法を使用してリンクしようとすると、データを表示できないようです。GoogleChrome20.0.1132.47でExtJs4.1.0を実行しています。何か案は?
私は最小限の関連性のあるコードのみを投稿しようとしました(それでもまだたくさんのようですが)。明確にできることがあれば教えてください。どんな助けでも大歓迎です。ありがとう!
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'
}]
}]
}]
});