Ext.grid学习笔记

1、关于grid的问题,右击某行选中该行。
在右键菜单方法contextMenu里加一行代码就行了grid.getSelectionModel().selectRow(rowIndex);
2、
this.ssm = new Ext.grid.CheckboxSelectionModel();
this.ssm.handleMouseDown = Ext.emptyFn;//这个方法可以在点击行的时候不会选择checkbox,点击checkbox的时候不会选择行,然后再增加rowclick事件，让handleMouseDown失效
3、问题:
1).点击记录只改变背景色，不改变选择状态。要想选中，只能去点击checkbox
2).点击记录，选中该记录，但不改变其它已选中记录的状态。
解决方案:
1)、var sm = new Ext.grid.CheckboxSelectionModel();
sm.handleMouseDown = Ext.emptyFn;
让handleMouseDown失效，其他照旧
2)、
第二种效果：
在第一种效果的基础上加：
grid.on('rowclick', function(grid,t) {
if(sm.isSelected(t))
sm.deselectRow(t);
else
dbsm.selectRow(t,true);
});
4、
问题:
ext中 grid面板上有button和CheckboxSelectionModel选择框小组件，
在单击按钮事件时，怎么获取被选checkbox的信息，
解决方案:
//按钮单击事件
function button_test_event (e){
   var records=sm.getSelections();//获取所有被选中的记录集 类型：Ａｒｒａｙ
   var _length=records.length;
   var datas='';
       for(var i=0;i<_length;i++){
       var record=records[i];
       var data = record.get('Title');
       datas=datas+data;
       }
   alert('message 记录'+datas);
}
5、
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();