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

Extjs6问题——grid不显示数据相关推荐

python利用wx.grid网格显示数据
首先需要定义类似数据模板的类. import wx.grid as gridclass MyDataTable(grid.PyGridTableBase):def __init__(self,data ...
使用Ext.grid.Panel显示远程数据
使用Ext.grid.Panel显示远程数据对于Ext.grid.Panel而言,它只是负责显示Store数组中心的数据,至于Store保存的数据到底是浏览器本地数据,还是远程服务器的数据,Ext. ...
EXTjs grid与json数据转载
刚开始学习extjs,真是摸不着头呀. 做了半天才搞出一个grid显示数据.在网上找了个数据做了个测试. 一下是代码. 首先:把ext-3.1.0文件夹放到根目录下. 新建一个Default.aspx ...
python显示数据长度_Python数据分析之初识可视化
一.数据可视化概述数据可视化是在整个数据分析非常重要的一个辅助工具,可以清晰的理解数据,从而调整我们的分析方法. - 能将数据进行可视化,更直观的呈现 - 使数据更加客观.更具说服力例如下面两个图 ...
Bootstrap-table 显示数据到表格
一.什么是Bootstrap-table? 在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这 ...
echarts 使用案例：针对map地图中显示数据格式化
前言: 1,报表连接:http://gallery.echartsjs.com/editor.html?c=xrJZ60TVIg 2,echats 制作报表中,使用地图的展示样式,发现地图上的显示数据 ...
html5展示json数据库,显示数据在html5从数据库使用javascript和json
我想从MySQL数据库显示在html中的列表.要从MySQL获取数据我使用json和javascript.但它什么也没有显示!显示数据在html5从数据库使用javascript和json 我的HTM ...
python使用matplotlib可视化雷达图(polar函数可视化雷达图、极坐标图、通过径向方向来显示数据之间的关系)
python使用matplotlib可视化雷达图(polar函数可视化雷达图.极坐标图.通过径向方向来显示数据之间的关系) 目录
seaborn使用violinplot函数可视化小提琴图、并在violinplot函数中设置inner参数来添加数据点显示数据的稠密程度
seaborn使用violinplot函数可视化小提琴图.并在violinplot函数中设置inner参数来添加数据点显示数据的稠密程度(Seaborn violinplot with data po ...

Extjs6问题——grid不显示数据

Extjs6问题——grid不显示数据相关推荐

最新文章

热门文章