Extjs6问题——grid不显示数据

  使用MVVC框架显示一个表格，遇到gridPanel只显示表头，但是不显示数据的问题，可以从以下的几个角度考虑。

 1. 数据是否有问题？检查返回的json数据结构是否与reader对应。

 2. models里面fields对应关系是否正确？保险起见最好加上mapping。

 3. 比较诡异的一个问题是define view的时候，store如果是引用的方式，即：store：’{xxx}‘，store并不会在view 被创建的时候创建一个实例，这里强制在store的时候用store：Ext.create('xxx.xx.xxx');才正确的加载了数据。

下面记录下更正之后的代码：

View：

Ext.define('Admin.view.dashboard.MalfunctionListInbox',{
extend: 'Ext.grid.GridPanel',

xtype: 'malfunctionlistinbox',

alias: 'widget.malfunctionlistinbox',

requires: [
'Ext.grid.GridPanel',
'Ext.grid.View',
'Ext.selection.CheckboxModel',
'Admin.view.dashboard.MalfunctionListInboxController',
'Admin.view.dashboard.MalfunctionListModel',
'Admin.store.dashboard.MalfunctionListStore'
],
cls: 'email-inbox-panel shadow-panel',

viewModel:{
type: 'malfunctionlist'
},

store:Ext.create('Admin.store.dashboard.MalfunctionListStore'),

controller: 'malfunctionlistcontroller',

ViewConfig:{
preserveScrollOnRefresh: true,
preserveScrollOnReload: true,
},

selModel: {
selType: 'checkboxmodel',
checkOnly: true,
showHeaderCheckbox: true
},

listeners: {
'cellclick': 'onGridCellItemClick'
},

layout:{
type : 'fit',
},

headerBorders: false,
rowLines: false,
autoRender:true,

columns:[
{
xtype:'gridcolumn',
dataIndex:'id',
text:'id',
hidden:true
},
{
xtype:'gridcolumn',
dataIndex: 'date',
text:'日期',
width:90,
renderer:Ext.util.Format.dateRenderer('Y年m月d日 H:i')
},
{
xtype:'gridcolumn',
dataIndex:'unit_name',
text:'单位名称'
},
{
xtype:'gridcolumn',
dataIndex:'malfunction_name',
text:'故障名称'
},
{
xtype:'gridcolumn',
dataIndex:'malfunction_type',
text:'故障线路类型'
},
{
xtype:'gridcolumn',
dataIndex:'malfunction_nature',
text:'故障性质'
},
{
xtype:'gridcolumn',
dataIndex:'malfunction_reason',
text:'故障原因'
}
]

});


ViewModel：
Ext.define('Admin.view.dashboard.MalfunctionListModel',{
extend:'Ext.app.ViewModel',
requires:[
'Admin.store.dashboard.MalfunctionListStore',
'Admin.model.dashboard.MalfunctionListModel'
],
alias:'viewmodel.malfunctionlist',

stores:{
MalfunctionList: {
xtype: 'MalfunctionListStore'
}
}
});

Store：
Ext.define("Admin.store.dashboard.MalfunctionListStore",{
extend: 'Ext.data.Store',
alias:'store.MalfunctionListStore',

requires:[
'Admin.model.dashboard.MalfunctionListModel',
'Ext.window.MessageBox'
],

id: 'malfunctionlist',
model:'Admin.model.dashboard.MalfunctionListModel',
//pageSize:20,
autoLoad:true,

proxy:{
type:'ajax',
url: '/app/data/dashboard/MalfunctionList.json',
reader: {
type:'json',
rootProperty:'data',
successProperty:'success',
actionMethods:{
read: 'GET'
}
}
}
});


Model：
Ext.define("Admin.model.dashboard.MalfunctionListModel",{
extend: 'Admin.model.Base',
idProperty: 'id',

field:[
{
type: 'int',
name: 'id',
mapping:'id'
},
{
type:'date',
name:'date',
dateFormat:'Y-m-dTH:i',
mapping: 'date'
},
{
type:'string',
name:'unit_name',
mapping: 'unit_name'
},
{
type:'string',
name:'malfunction_name',
mapping:'malfunction_name'
},
{
type:'string',
name:'malfunction_type',
mapping:'malfunction_type'
},
{
type:'string',
name:'malfunction_nature',
mapping:'malfunction_nature'
},
{
type:'string',
name:'malfunction_reason',
mapping:'malfunction_reason'
}
]
});