extjs 之 grid篇

最新推荐文章于 2019-01-10 11:01:15 发布

chengchen404

最新推荐文章于 2019-01-10 11:01:15 发布

阅读量522

点赞数

本文链接：https://blog.csdn.net/Fupengyao/article/details/50717081

版权

要明白 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 对象数组，数组的元素个数由列的数量来决定。