在ExtJs应用程序中不显示网格数据

Question

我正在使用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/）中建议的方式进行连接时，似乎无法显示我的数据。我在Google Chrome 20.0.1132.47上运行ExtJs 4.1.0。有任何想法吗？

我试图发布只有最小的相关位代码（尽管它仍然看起来很多）。让我知道是否有任何我可以澄清。任何帮助将不胜感激。谢谢！

Grip.controller.UYNMeeting：

Ext.define（ 'Grip.controller.UYNMeeting'，{ 延伸： '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

我不知道这是否是一个错字，但电网没有一个stores配置 - 它只能显示一个商店的数据，因此它有一个store配置（单数，不是复数）