我们知道,实现extjs的Grid必须先定义一个ColumnModel,指定列名称、列标题、宽度、对齐方式,然后定义一个Record和Store,指定数据源的字段名、类型,最后定义一个Grid,完整过程的代码类似如下:
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cmCust = new Ext.grid.ColumnModel([{
header: "客户编码",
dataIndex: 'CUSTID',
width: 70
}, {
header: "客户简称",
dataIndex: 'CUSTSHORTNAME',
width: 200
}, {
header: "预收金额",
dataIndex: 'PREPAYMENT',
width: 100,
align: 'right',
renderer: Ext.util.Format.gbMoney
},{
header: "应收金额",
dataIndex: 'PAYMENT',
width: 100,
align: 'right',
renderer: Ext.util.Format.gbMoney
},{
header: "实际欠款",
dataIndex: 'SJQK',
width: 100,
align: 'right',
renderer: Ext.util.Format.gbMoney
},{
header: "信用期限",
dataIndex: 'LICENSEPERIOD',
width: 100,
align: 'right'
},{
header: "信用额度",
dataIndex: 'LICENSEMONEY',
width: 100,
align: 'right',
renderer: Ext.util.Format.gbMoney
}]);
// by default columns are sortable
cmCust.defaultSortable = true;
// this could be inline, but we want to define the order record
// type so we can add records dynamically
var cust = Ext.data.Record.create([
{name: 'CUSTID', type: 'string' },
{name: 'CUSTSHORTNAME', type: 'string'},
{name: 'PREPAYMENT', type: 'float'},
{name: 'PAYMENT', type: 'float'},
{name: 'SJQK', type: 'float'},
{name: 'LICENSEPERIOD', type: 'float'},
{name: 'LICENSEMONEY', type: 'float'}
]);
// create the Data Store
var dsCust = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: '../getCustList.do'}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.DynamicXmlReader({
// records will have a "customer" tag
record: 'table',
totalRecords: 'records'
}, cust)
});
var gridCust = new Ext.grid.DynamicGrid( 'customer-grid', {
ds: dsCust,
cm: cmCust,
selModel: new Ext.grid.RowSelectionModel(),
enableColLock:false,
loadMask: true, });
gridCust.render();
此过程相当繁琐。很多情况下,我们需要一个通用的动态Grid,不必指定字段名、字段类型、列头等信息,而是根据返回记录(通常是json或xml格式)的结构和内容,自动将记录展现在Grid中,这就是Dynamic Grid。
extjs的论坛上有两种方式实现Dynamic Grid,一种是json,另一种是xml。前者请看http://extjs.com/learn/Ext_Extensions。对于xml方式,需要扩展Ext.data.XmlReader和Ext.grid.Grid,具体根据返回的xml的结构,假设返回的xml类似:
<?xml version="1.0" encoding="UTF-8"?>
<response success='true'>
<database>
<record>
<SUPPLIERID><![CDATA[1]]></SUPPLIERID>
<SUPPLIERSHORTNAME><![CDATA[中原公司]]></SUPPLIERSHORTNAME>
<PREPAYMENT><![CDATA[0.00000000]]></PREPAYMENT>
<PAYMENT><![CDATA[0.00000000]]></PAYMENT>
<SJQK><![CDATA[0.00000000]]></SJQK>
</record>
<record>
<SUPPLIERID><![CDATA[2]]></SUPPLIERID>
<SUPPLIERSHORTNAME><![CDATA[广州市五金公司]]></SUPPLIERSHORTNAME>
<PREPAYMENT><![CDATA[0.00000000]]></PREPAYMENT>
<PAYMENT><![CDATA[6855.00000000]]></PAYMENT>
<SJQK><![CDATA[6855.00000000]]></SJQK>
</record>
</database>
</response>
在上面的xml内容中,每个<record>是一个记录,我们必须得到<record>中所有子元素的名称,做为Grid的列标题:
Ext.grid.DynamicColumnModel = function(store) {
var cols = [];
var recordType = store.reader.recordType;
var fields = recordType.prototype.fields;
for (var i = 0; i < fields.keys.length; i++) {
var fieldName = fields.keys[i];
var field = recordType.getField(fieldName);
cols[i] = {
header: field.header,
dataIndex: field.name,
tooltip: field.tooltip,
hidden: field.hidden,
renderer: eval(field.renderer)
};
}
Ext.grid.DynamicColumnModel.superclass.constructor.call(this, cols);
};
Ext.extend(Ext.grid.DynamicColumnModel, Ext.grid.ColumnModel, {});
Ext.data.DynamicXmlReader = function(config) {
Ext.data.DynamicXmlReader.superclass.constructor.call(this, config, []);
};
Ext.extend(Ext.data.DynamicXmlReader, Ext.data.XmlReader, {
getRecordType : function(data) {
recordDefinition = Ext.DomQuery.select( this.meta.record + ':first-child > *', data);
var arr = [];
for (var i = 0; i < recordDefinition.length; i++) {
arr[i] = {
name:recordDefinition[i].tagName,
header:recordDefinition[i].tagName
};
}
this.recordType = Ext.data.Record.create(arr);
return this.recordType;
},
readRecords : function(doc) {
this.xmlData = doc;
var root = doc.documentElement || doc;
this.getRecordType(root);
return Ext.data.DynamicXmlReader.superclass.readRecords.call(this, doc);
}
});
Ext.grid.GridView.prototype.bindColumnModel = function(cm) {
if(this.cm){
this.cm.un("widthchange", this.updateColumns, this);
this.cm.un("headerchange", this.updateHeaders, this);
this.cm.un("hiddenchange", this.handleHiddenChange, this);
this.cm.un("columnmoved", this.handleColumnMove, this);
this.cm.un("columnlockchange", this.handleLockChange, this);
}
if(cm){
this.generateRules(cm);
cm.on("widthchange", this.updateColumns, this);
cm.on("headerchange", this.updateHeaders, this);
cm.on("hiddenchange", this.handleHiddenChange, this);
cm.on("columnmoved", this.handleColumnMove, this);
cm.on("columnlockchange", this.handleLockChange, this);
}
this.cm = cm;
};
Ext.grid.DynamicGrid = function(container, config) {
Ext.grid.DynamicGrid.superclass.constructor.call(this, container, config);
};
Ext.extend(Ext.grid.DynamicGrid, Ext.grid.Grid, {
render : function() {
this.dataSource.addListener('load', this.doReconfiguration, this);
this.colModel = new Ext.grid.DefaultColumnModel([{ header: '', dataIndex: '' }]);
Ext.grid.DynamicGrid.superclass.render.call(this);
},
doReconfiguration : function() {
this.colModel = new Ext.grid.DynamicColumnModel(this.dataSource);
this.view.bindColumnModel(this.colModel);
this.view.refresh(true);
//this.dataSource.removeListener("load", this.doReconfiguration);
}
});
上面的代码实现了DynamicColumnModel、DynamicXmlReader和DynamicGrid,DynamicXmlReader根据xml文件的结构和内容,自动配置一个ColumnModel和Store,这样最终的Dynamic Grid实现代码如下所示:
var dsCust = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: '../getCustList.do'}),
// the return will be XML, so lets set up a reader
reader: new Ext.data.DynamicXmlReader({
record: 'record',
totalRecords: 'records'
})
});
var gridCust = new Ext.grid.DynamicGrid( 'customer-grid', {
ds: dsCust,
//cm: cmCust,
selModel: new Ext.grid.RowSelectionModel(),
enableColLock:false,
loadMask: true
});
gridCust.render();
相比本文开头的代码简化了很多。当然还有很多地方需要优化,例如实现描述性的列标题(而不是以字段名做为列标题),配置列宽和对齐方式,实现Dynamic EditorGrid等,通常我们还需要一个配置档,将这些原先硬编码的信息在配置档里配置好,然后在返回的json和xml中,除了有结果记录外,还有配置档中的meta信息,以便根据这些信息自动展现Dyanmic Grid。
相比而言,由于json较xml简洁,而且JsonReader本身就支持meta数据,使用JsonReader实现DynamicGrid较XmlReader方式简单,运行效率也高。当然,前提是必须将记录转换成json格式,目前json格式可能不如xml格式使用的多。
分享到:
相关推荐
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Extjs动态Grid的生成 htm
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
使用ExtJs相关的控件类自己实现的一个ExtJs的Grid列表的导出功能,可以导出列表的相关样式等
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
extjs4 grid 包括form js代码
Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 <link href='...
ExtJs 4.0 Grid 单元格合并控件封装
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
Extjs4下拉菜单中用Grid显示,有单选,和多选两个控件,完美通用代码控件,绝对让你好用,值得收藏^-^
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
ExtJS 表格的功能实现,包括单元格编辑,数据的获取。
ExtJs_grid.txt grid使用总结
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
title的header表头名、width宽度、dataIndex映射名都可以根据外部定义的xml进行读取,便于将ExtJs的Grid封装
实现extjs4 的树、grid、form、query等大部分组件的功能
extjs grid 多表头 插件 extjs grid 多表头 插件
Extjs4 Grid分页与自动刷新