Extjs6问题——grid不显示数据

来源：互联网发布：福建知鱼科技有限公司编辑：程序博客网时间：2024/04/30 20:17

使用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'        }]});

0 0