extjs 之 grid篇
要明白 store proxl reader model 之间的关系
第一篇文章
Ext.define('Business.store.businessRequest.BrUnitRuleStore',{
extend:'Ext.data.Store',alias : 'widget.brUnitRuleStore',
pageSize:BusinessCommon.PAGE_NUM,
pageNum:1,
// code:'',
model:'Business.model.businessRequest.BrUnitRuleModel',
autoLoad:false,
proxy: {
type: 'ajax',
url : 'rule/queryAllRules',
actionMethods : {
read : 'POST'
},
reader: {
type: 'json',
root: 'resultList',
totalProperty:'totalCount'
}
},
listeners : {
beforeload : {
fn : function(store, options) {
// 设置查询参数
// 通过自己的编号
// var index = store.storeId.split('_')[1];
// 获得grid对象
// var grid = Ext.getCmp('govInfoModuleGrid_'+index);
// 获得属性
// var id = Ext.getCmp('govInfoModuleSearchModule_ID-' + index).getValue();
// var name = Ext.getCmp('govInfoModuleSearchModule_Name-' + index).getValue();
// alert(1);
// alert('id:'+module_ID+' name:'+module_Name);
// {params:{module_Id:tab.moduleId,module_Name:rec.get('text')}}
// alert(store.storeId);
// var brUnitId = Ext.getCmp('businessRule_tab').selectBrUnitId;
var brUnitId = Ext.getCmp('brUtinTabPanel_br').selectBrUnitId;
Ext.apply(store.proxy.extraParams, {
'pageNum' : this.pageNum,
'pageSize': this.pageSize,
'unitId':brUnitId
});
}
}
}
});
其中proxy是用来访问服务器端数据的，
reader是用来把 返回来的数据解析成对应的model实例，
pageSize是用来供grid分页用的，
root是返回数据的key,他后面的是用解析成model层对象的数据，
totalProperty是返回数据对应的model的总数，
一般返回的json格式是：{totalCount:3,resultList:[{name:ss,age12},{name:aa,age:13},{name:bb,age14}]}
autoLoad设置成true,会自动加载的你都store，一般不设置成true,
listener：beforeLoad事件是没回加载数据时都会执行的事件
store在load数据时时可以传递参数的
store.load({params:{ids:ids}});
第二篇文章
Ext.onReady(function(){
var cities=[
[1,"北京"],
[2,"上海"],
[3,"广州"],
[4,"深圳"],
[5,"天津"]
];
var city=Ext.data.Record.create([
{
name:"cid",type:"int",mapping:0
},
{
name:"cname",type:"string",mapping:1
}
]);
var proxy=new Ext.data.MemoryProxy(cities);
var reader=new Ext.data.ArrayReader({},city);
var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true//即使加载
});
var box=new Ext.form.ComboBox({
renderTo:Ext.getBody(),
store:store,
triggerAction:"all",
displayField:"cname",
valueField:"cid",
mode:"local",
emptyText:"请选择一线城市名称："
});
});
ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来，于是，Ext.data成了数据的来源，控制负责显示数据。
DataProxy：获取想要的数据，通过他能得到来自不同地方的数据，如数组、远程服务
器，并组织成不同的格式。
DataReader：定义数据项的逻辑结构，一个数据项有很多列，每列的名称是什么，分别
是什么数据类型，都由该类来定义。另外，还负责对不同格式的数据进行读取和解析。
Store：存储器，用于整合 Proxy 和 Reader，控索取数据时通常和他打交道。
Ext.data. DataProxy 就是来源这样一种灵感。
Ext.data.DataProxy 是获取数据的代理，数据可能来自于内存，可能来自于同一域的远
程服务器数据，更有可能来自于不同域的远程服务器数据。
但是，在实际应用中，我们不会直接使用 Ext.data.DataProxy，而是使用他的子类：
MemoryProxy、HttpProxy 和 ScriptTagProxy，他们的作用分别是：
MemoryProxy：获取来自内存的数据，可以是数组、json 或者 xml。
HttpProxy：使用 HTTP 协议通过 ajax 从远程服务器获取数据的代理，需要指定 url。
ScriptTagProxy：功能和 HttpProxy 一样，但支持跨域获取数据， 是实现时有点偷鸡摸
狗。
我们定义了一个 City 的结构，通过 Ext.data.Record.create 创建，参数是一个 json 对象数组，name 和 type 分别表示每一列的名称和数据类型，mapping 是列值与数组元素的映射关
Record 创建 好 后 ， 必须 和 DataReader 关 联 ， DataReader 也 同样有 三 个 子 类：
Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader。我之前说过 DataReader从来不单独行动，使用哪一个子类主要取决 DataProxy 中封装的数据类型，如果是数组，则使用 Ext.data.ArrayReader；如果是 json，则使用 Ext.data.JsonReader；如果是 xml，则使用
Ext.data.XmlReader。在本教程中，我打算将 xml 封杀。我不喜欢这个东西（尽管有时候不
得不面对） 。相对而言，我更热衷 轻量级的 jsonObject。
Ext.data.Record 并没有固定的结构，他保存的是一个 json 对 象数组，数组的元素个数由列的数量来决定。
Ext.onReady(function(){
var cities=[
[1,"北京"],
[2,"上海"],
[3,"广州"],
[4,"深圳"],
[5,"天津"]
];
var city=Ext.data.Record.create([
{
name:"cid",type:"int",mapping:0
},
{
name:"cname",type:"string",mapping:1
}
]);
var proxy=new Ext.data.MemoryProxy(cities);
var reader=new Ext.data.ArrayReader({},city);
var store=new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true//即使加载
});
var box=new Ext.form.ComboBox({
renderTo:Ext.getBody(),
store:store,
triggerAction:"all",
displayField:"cname",
valueField:"cid",
mode:"local",
emptyText:"请选择一线城市名称："
});
});
ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来，于是，Ext.data成了数据的来源，控制负责显示数据。
DataProxy：获取想要的数据，通过他能得到来自不同地方的数据，如数组、远程服务
器，并组织成不同的格式。
DataReader：定义数据项的逻辑结构，一个数据项有很多列，每列的名称是什么，分别
是什么数据类型，都由该类来定义。另外，还负责对不同格式的数据进行读取和解析。
Store：存储器，用于整合 Proxy 和 Reader，控索取数据时通常和他打交道。
Ext.data. DataProxy 就是来源这样一种灵感。
Ext.data.DataProxy 是获取数据的代理，数据可能来自于内存，可能来自于同一域的远
程服务器数据，更有可能来自于不同域的远程服务器数据。
但是，在实际应用中，我们不会直接使用 Ext.data.DataProxy，而是使用他的子类：
MemoryProxy、HttpProxy 和 ScriptTagProxy，他们的作用分别是：
MemoryProxy：获取来自内存的数据，可以是数组、json 或者 xml。
HttpProxy：使用 HTTP 协议通过 ajax 从远程服务器获取数据的代理，需要指定 url。
ScriptTagProxy：功能和 HttpProxy 一样，但支持跨域获取数据， 是实现时有点偷鸡摸
狗。
我们定义了一个 City 的结构，通过 Ext.data.Record.create 创建，参数是一个 json 对象数组，name 和 type 分别表示每一列的名称和数据类型，mapping 是列值与数组元素的映射关
Record 创建 好 后 ， 必须 和 DataReader 关 联 ， DataReader 也 同样有 三 个 子 类：
Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader。我之前说过 DataReader从来不单独行动，使用哪一个子类主要取决 DataProxy 中封装的数据类型，如果是数组，则使用 Ext.data.ArrayReader；如果是 json，则使用 Ext.data.JsonReader；如果是 xml，则使用
Ext.data.XmlReader。在本教程中，我打算将 xml 封杀。我不喜欢这个东西（尽管有时候不
得不面对） 。相对而言，我更热衷 轻量级的 jsonObject。
Ext.data.Record 并没有固定的结构，他保存的是一个 json 对 象数组，数组的元素个数由列的数量来决定。