Extjs4——表格控件

1.一个表格的简单形式：

columns定义表格的结构，包括首部显示文本（header），列对应的记录集字段（dataIndex），列是否排序（sortable），列的渲染函数（renderer）,宽度（width），格式化信息（format）

data定义表格要显示的数据（原始数据）

store为数据存储对象，它负责将各种原始数据转换成Ext.data.Record类型的对象，包括两部分：proxy和reader。proxy指获取数据的方式，reader指如何解析数据。（因为下例中用了Ext.data.ArrayStore，它的内部会默认通过内存加载JSON数据作为元数据）

var columns = [
        {header:'编号',dataIndex:'id',sortable:true},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ];

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [             
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });
/*fields定义了如何解析数据 ,可以用mapping来指定列以与dataIndex对应

 var store = new Ext.data.ArrayStore({
        data: data,
        fields: [             
            {name: 'id',mapping:1},
            {name: 'name',mapping:0},
            {name: 'descn',mapping:2}
        ]
*/

store.load();//初始化数据，刷新数据 

var grid = new Ext.grid.GridPanel({
 autoHeight: true, 
renderTo: 'grid', //注意要有ID为grid的div
store: store, 
columns: columns });

2.表格部分功能设置：

2.1 禁用拖放列和改变列宽的功能，显示斑马线，遮罩和提示功能

var grid = new Ext.grid.GridPanel({

       enableColumnMove：false，//表格默认是可以拖放列和该变列宽的
       enableColumnResize:false,
       autoHeight: true,
        renderTo: 'grid',
        stripeRows: true,//让表格显示斑马线效果
        store: store,
       loadMask: true,//读取数据时的遮罩和提示功能
       columns: columns });

2.2自主决定每列的宽度：

colunms如果不给每列设置宽度，它会有一个默认值100px。还有一个forceFit属性，表格会根据columns中设置的width按比例分配

var columns = [
        {header:'编号',dataIndex:'id',35},
        {header:'名称',dataIndex:'name',80},
        {header:'描述',dataIndex:'descn',120}
    ];

 var data = [
      ['1','name1','descn1'],
      ['2','name2','descn2'],
      ['3','name3','descn3'],
      ['4','name4','descn4'],
      ['5','name5','descn5']
  ];

var store = new Ext.data.ArrayStore({
data: data,
fields: [
   {name: 'id'},
          {name: 'name'},
          {name: 'descn'}
      ]
  });
  store.load();

  var grid = new Ext.grid.GridPanel({
      autoHeight: true,
      renderTo: 'grid',
      store: store,
      columns: columns,
    forceFit: true
  });

2.3 排序：

列排序：只需在定义列模型时增加sortable属性即可，另外表格每列默认有升序和降序排列项

    var columns = [
        {header:'编号',dataIndex:'id',sortable:true},
        {header:'名称',dataIndex:'name',sortable:false},
        {header:'描述',dataIndex:'descn',sortable:false}
    ];

支持中文排序：一般我们是使用ascii码进行排序，而中文排序为拼音排序，这里需要重写Ext.data.Store的createComparator()函数

Ext.data.Store.prototype.createComparator = function(sorters) {
    return function(r1, r2) {
        var s = sorters[0], f = s.property;

        var v1 = r1.data[f], v2 = r2.data[f];

        var result = 0;
        if (typeof(v1) == "string") {
            result = v1.localeCompare(v2);
            if (s.direction == 'DESC') {
                result *= -1;
            }
        } else {
            result = sorters[0].sort(r1, r2);
        }

        var length = sorters.length;

        // if we have more than one sorter, OR any additional sorter functions together
        for (var i = 1; i < length; i++) {
            s = sorters[i];
            f = s.property;
            v1 = r1.data[f];
            v2 = r2.data[f];
            if (typeof(v1) == "string") {
                result = result || v1.localeCompare(v2);
                if (s.direction == 'DESC') {
                    result *= -1;
                }
            } else {
                result = result || s.sort.call(this, r1, r2);
            }

        }
        return result;
    };
};


Ext.onReady(function(){

    var columns = [
        {header:'编号',dataIndex:'id',sortable:true,35},
        {header:'名称',dataIndex:'name',sortable:true,80},
        {id:'descn',header:'描述',dataIndex:'descn',sortable:true,200}
    ];

    var data = [
        ['1','啊','descn1'],
        ['2','啵','descn2'],
        ['3','呲','descn3'],
        ['4','嘚','descn4'],
        ['5','咯','descn5']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ],
        sorters: [{property: "name", direction: "ASC"}]//通过sorters设置一个默认的排序方式
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns
    });

});

2.4显示日期类型数据：

   var columns = [
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'},
        {header:'日期',dataIndex:'date', renderer: Ext.util.Format.dateRenderer('Y-m-d')}
    ];

    var data = [
        ['1','name1','descn1','1970-01-15T02:58:04'],
        ['2','name2','descn2','1970-01-15T02:58:04'],
        ['3','name3','descn3','1970-01-15T02:58:04'],
        ['4','name4','descn4','1970-01-15T02:58:04'],
        ['5','name5','descn5','1970-01-15T02:58:04']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'},
            {name: 'date', type:'date',dateFormat: 'Y-m-dTH:i:s'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns
    });

2.5 表格渲染

例如可以为性别不同的行设置不同的颜色，也可以在单元格里添加图片等等

    function renderSex(value) {
        if (value == 'male') {
            return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
        } else {
            return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
        }
    }

    function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
/*value:要显示到单元格里的值    cellmeta:单元格的相关属性，主要有id和css    record:这行的数据对象，如果需要获取其他列的值，可以通过record.data["id"]的方式得到
 rowIndex：行号   columnIndex：当前列的列号    store：构造表格时传递的ds,表格里的所有数据都可以通过store获得*/

        var str = "<input type='button' value='查看详细信息' onclick='alert("" +
            "这个单元格的值是：" + value + "\n" +
            "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\n" +
            "这个单元格对应行的record是：" + record + "，一行的数据都在里边\n" +
            "这是第" + rowIndex + "行\n" +
            "这是第" + columnIndex + "列\n" +
            "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
            "")'>";
        return str;
    }

    var columns = [
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex',renderer:renderSex},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn',renderer:renderDescn}
    ];

    var data = [
        ['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields:k [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns
    });

2.6给表格行列设置颜色：

给行设置颜色：

 <style type="text/css">
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
.x-grid-row .x-grid-cell {background-color:transparent;}
   </style>
        <script type="text/javascript">
            Ext.onReady(function(){

    var data = [
        ['boy', 0, '#FBF8BF'],
        ['girl', 1, '#99CC99'],
        ['man', 0, '#F5C0C0'],
        ['woman', 1, '#FFFFFF']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'sex', type: 'int'},
            {name: 'color', type: 'string'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: 'name', dataIndex: 'name'},
            {header: 'sex', dataIndex: 'sex'}
        ],
        autoHeight: true,
        renderTo: 'grid',
        forceFit : true,
        viewConfig : {
            enableRowBody : true,
            getRowClass :function(record, rowIndex, p, ds) {
                var cls = 'white-row';
                switch (record.data.color) {
                    case '#FBF8BF' :
                        cls = 'yellow-row'
                        break;
                    case '#99CC99' :
                        cls = 'green-row'
                        break;
                    case '#F5C0C0' :
                        cls = 'red-row'
                        break;
                }
                return cls;
            }
        }
    });

});
        </script>

给列设置颜色：

 function renderMotif(data, cell, record, rowIndex, columnIndex, store){
        var value = record.get('color')
        cell.style = "background-color:" + value;
        return data;
    }

    var columns = [
        {header: 'name', dataIndex: 'name'},
        {header: 'sex', dataIndex: 'sex'},
        {header: 'color', dataIndex: 'color', renderer: renderMotif}
    ];

    var data = [
        ['boy', 0, '#FBF8BF'],
        ['girl', 1, '#FBF8BF'],
        ['man', 0, '#FBF8BF'],
        ['woman', 1, '#FBF8BF']
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'sex', type: 'int'},
            {name: 'color', type: 'string'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: columns,
        autoHeight: true,
        renderTo: 'grid',
        forceFit : true
    });

});

2.7 自动显示行号：

 var columns = [
        new Ext.grid.RowNumberer(),
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ];

效果如下：

 2.8 显示复选框：

SelectionModel对象即selModel，它在总体上控制用户对表格的选择功能。

 var sm = new Ext.selection.CheckboxModel({checkOnly: false});

  var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns,
        selModel: sm
    });

效果如下：

2.9 限制输入数据的类型：

Ext提供了多种数据类型的组件，比如NumberField限制只能输入数字，ComBox限制只能输入备选项，DataField限制只能输入日期，CheckBox限制从true和false二选一

    var comboData = [   //首先准备下拉列表中的数据
        [0,'新版ext教程'],
        [1,'ext在线支持'],
        [2,'ext扩展']
    ];

    var columns = [{
        header:'数字列',
        dataIndex:'number',
        editor:new Ext.form.NumberField({
            allowBlank: false,
            allowNegative: false,
            maxValue: 10
        })
    },{
        header:'选择列',
        dataIndex:'combo',
        editor:new Ext.form.ComboBox({
            store: new Ext.data.SimpleStore({
                fields:['value','text'],
                data: comboData
            }),
            emptyText: '请选择',
            mode: 'local',
            triggerAction: 'all',
            valueField: 'value',
            displayField: 'text',
            editable: false
        }),
        renderer: function(value){
            return comboData[value][1];
        }
    },{
        header:'日期列',
        dataIndex:'date',
        editor:new Ext.form.DateField({
            format: 'Y-m-d',
            minValue: '2007-12-14',
            disabledDays: [0, 6],
            disabledDaysText: '只能选择工作日'
        }),
        renderer: function(value) {
            return Ext.Date.format(value, "Y-m-d");
        }
    },{
        header:'判断列',
        dataIndex:'check',
        editor:new Ext.form.Checkbox({
            allowBlank: false
        }),
        renderer:function(value) {
            return value ? '是' : '否';
        }
    }];

    // 放到grid里显示的原始数据
    var data = [
        [1.1,1,new Date(),true],
        [2.2,2,new Date(),false],
        [3.3,0,new Date(),true],
        [4.4,1,new Date(),false],
        [5.5,2,new Date(),true]
    ];

    var store = new Ext.data.ArrayStore({
        data: data,
        fields: [
            {name: 'number'},
            {name: 'combo'},
            {name: 'date'},
            {name: 'check'}
        ]
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        columns: columns,
        selType: 'cellmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
        ]
    });