Ext.grid.Panel 是表格，可以显示数据，我们来看看它的基本用法：
View + Store + Model
使用上述三个“部分”就可以完整的，最简易的在Ext的世界中绘制一个用于显示数据库中数据的UI
View部分的代码
Ext.define('RUKU.view.hr.HRUserList', {
extend: 'Ext.grid.Panel',
xtype: 'hruserlist',
requires:[
'RUKU.store.hr.HRUserListStore',
'RUKU.model.hr.HRUserListModel'
],
//为View关联上Store
store: {
type:'huls'
},
initComponent:function(){
var me = this;
me.columns = [
{text:'胸卡号', dataIndex:'pernr',flex:1},
{text:'姓名', dataIndex:'ename',flex:1},
{text:'状态', dataIndex:'pstate',flex:1}
];
me.tbar = {
xtype : "pagingtoolbar",
pageSize : 20,
displayInfo: true
};
me.callParent(arguments);
}
});Store部分的代码
Ext.define('RUKU.store.hr.HRUserListStore', {
extend: 'Ext.data.Store',
alias: 'store.huls',
//为Store关联上Model
model: "RUKU.model.hr.HRUserListModel",
proxy: {
type: 'ajax',
url: 'hr/userlist.html',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
});
Model部分的代码：
Ext.define('RUKU.model.hr.HRUserListModel', {
extend: 'Ext.data.Model',
fields: [
{ name: "pernr" },
{ name: "ename" },
{ name: "pstate"}
]
});
上述三部分协作的效果是这样的：
就这样
我们先用文字描述一下上述例子，然后上调试信息，看得更清楚
这个例子已经简化到了极点：View Store Model
哪怕用MVC的代码分割方法，也只有M和V，连controller都没有，更不要说ExtJS6 引入的ViewModel了。
Model，也就是Ext.data.Model 仅仅描述 数据的格式。记住只是描述，它并不存储数据，也不负责任何动作。只是描述。
Store，是数据存放的容器。既然是存放，那么首先要获取数据，然后才能存放在Store中。Store中配置的proxy就是获取数据的代码。最关键的是，在Store中配置了 autoLoad: true，这样就一上来就不需要任何动作，就触发了load()行为。
View中直接配置了Store，store直接为grid的colum填充数据了。
下面我们改一下代码，目的是可以利用console在浏览器上显示调试的信息，执行效果如下
我们去掉了store文件，改为，为View添加一个controller
在controller中创建一个store，然后执行load()方法，然后在callback方法中，显示console的信息：
代码如下：
View部分的代码
Ext.define('RUKU.view.hr.HRUserList', {
extend: 'Ext.grid.Panel',
xtype: 'hruserlist',
requires:[
'RUKU.store.hr.HRUserListStore',
'RUKU.controller.hr.testController',
'RUKU.model.hr.HRUserListModel'
],
//为View配置controller
controller:'testc',
//为View屏蔽Store，让controller调用store
/*
store: {
type:'huls'
},
*/
initComponent:function(){
var me = this;
me.columns = [
{text:'胸卡号', dataIndex:'pernr',flex:1},
{text:'姓名', dataIndex:'ename',flex:1},
{text:'状态', dataIndex:'pstate',flex:1}
];
me.tbar = {
xtype : "pagingtoolbar",
pageSize : 20,
displayInfo: true
};
me.callParent(arguments);
}
});Controller部分的代码：
Ext.define('RUKU.controller.hr.testController',{
extend: 'Ext.app.ViewController',
alias: 'controller.testc',
init: function(){
var me = this;
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: "RUKU.model.hr.HRUserListModel",
proxy: {
type: 'ajax',
url: 'hr/userlist.html',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
store.load({
callback: function(records, operation, success) {
//alert(success);//显示success: true or false
console.log(records);
//alert("类型是："+typeof(store.getData())); //object, 这个方法没什么内涵
//alert("记录数 ："+store.getCount()); //内涵也不深刻
//alert("autoLoad : "+store.getAutoLoad()); //是否自动load,如果是就直接读数据
//下面内容是Store中的数据，可以变成字符串显示
//正确的说，是store.load()方法返回值的分析
var vJon = Ext.encode(records[3]['data']);
alert("data : ---" + vJon);
//var vJon2 = Ext.encode(records[3]['id']);
//alert("id : ---" + vJon2);
//循环读数据Store
/*
for(i in records[3]['data']){
alert(i);
var vJon = Ext.encode(records[3]['data']);
alert(vJon);
}
*/
},
scope: this
});
}
});Model部分的代码没有发生变化，就不列举了。
上述代码中，重要的是使用了store.load()方法返回值中的数据，把这些数据显示到console中，那么我们就可以利用Chrome浏览器进行调试了。
