实现extjs的Dynamic Grid

我们知道,实现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格式使用的多。