初探EXT(二)

优化GRID

1、让grid支持按列排序

只要加上sortable:true就可以了例：

var cm = new Ext.grid.ColumnModel([
 {header:'编号',dataIndex:'id' ,sortable:true},
 {header:'名称',dataIndex:'name' ,sortable:true},
 {header:'描述',dataIndex:'info' ,sortable:true}
]);

     

2、让单元格里显示红色的字，图片，按钮等等。

renderer属性

例1：{header:'性别',dataIndex:'sex',renderer:function(value){
            if (value == 'male') {
                return "<span style='color:red;font-weight:bold;'>红男</span>";
            } else {
                return "<span style='color:green;font-weight:bold;'>绿女</span>";
            }
        }},
例2：{header:'性别',dataIndex:'sex',renderer:function renderDescn(value, cellmeta, record, rowIndex, columnIndex, 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;
}},

3、行号，CheckBox

行号:

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

CheckBox:

var sm = new Ext.grid.CheckboxSelectionModel();

神奇的是这个sm身兼两职，使用的时候既要放到cm里，也要放到grid中。代码如下。

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

var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    sm: sm
});

4、传说中的Ext分页

var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })
});
ds.load();

就这么点代码就搞定了。。。 太伟大了