ExtJsGrid笔记

制作一个简单的Grid

 1var cm = new Ext.grid.ColumnModel([
 2    {header:'编号',dataIndex:'id'},
 3    {header:'名称',dataIndex:'name'},
 4    {header:'描述',dataIndex:'desc'}
 5]);
 6
 7var data = [
 8    [1,'name1','desc1'],
 9    [2,'name2','desc2'],
10    [3,'name3','desc3'],
11    [4,'name4','desc4'],
12    [5,'name5','desc5']
13];
14
15var store = new Ext.data.Store({
16    proxy:new Ext.data.MemoryProxy(data),
17    reader:new Ext.data.ArrayReader({},[
18        {name:'id'},
19        {name:'name'},
20        {name:'desc'}
21    ])
22});
23
24store.load();
25
26var grid = new Ext.grid.GridPanel({
27    height:600,
28    renderTo:'grid',
29    store:store,
30    cm:cm
31});

Grid常用功能详解
    enableColumnMove : true/false  //是否可拖放列
    enableColumnResize : true/false  //是否可以改变列的宽度
    stripeRows : true/false  //斑马线效果
    如果需要每列自动填满Grid，可以使用viewConfig配置中的foreceFit。即：

1var grid = new Ext.grid.GridPanel({
2    height:600,
3    renderTo:'grid',
4    store:store,
5    cm:cm,
6    viewConfig:{
7        forceFit:true
8    }
9});

    Gird支持中文排序需要重写Ext.data.Store的applySort函数：

 1Ext.data.Store.prototype.applySort = function() {
 2    if (this.sortInfo && !this.remoteSort) {
 3        var s = this.sortInfo, f = s.field;
 4        var st = this.fields.get(f).sortType;
 5        var fn = function(r1,r2){
 6            var v1 = st(r1.data[f]), v2=st(r2.data[f]);
 7            if (typeof(v1) == "string"){
 8                return v1.localeCompare(v2);
 9            }
10            return v1 > v2 ? 1: (v1 < v2 ? -1 : 0)
11        };
12        this.data.sort(s.direction,fn);
13        if (this.snapshot && this.snapshot != this.data) {
14            this.snapshot.sort(s.direction, fn);
15        }
16    }
17};

在单元格中显示红色的字、图片和按钮

 1var cm = new Ext.grid.ColumnModel([
 2    {header:'编号',dataIndex:'id'},
 3    {header:'名称',dataIndex:'name'},
 4    {header:'性别',dataIndex:'sex',renderer:function(value){
 5        if (value == 'male') {
 6            return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png'/>"
 7        } else {
 8            return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png'/>"
 9        }
10    }},
11    {header:'描述',dataIndex:'desc',renderer:fn}
12]);
13
14var fn = function(value, cellmeta, record, rowIndex, columnIndex, store){
15    var str = "<input type='button' value='查看详细信息' onclick='alert(\""+
16        "这个单元格的值是: " + value + "\\n" +
17        "这个单元格的配置是: {cellId" + cellmeta.cellId + ",Id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
18        "这个单元格对应行的record是:" + record + ", 一行的数据都在里面\\n" + 
19        "这是第" + rowIndex + "行\\n" +
20        "这是第" + columnIndex + "列\\n" +
21        "这个表格对应的Ext.data.Store在这里:" + store + ", 随便用吧。" +
22        "\")'>";
23    return str;
24}

给Grid的行和列设置颜色

//设置行的颜色
viewConfig:{
    forceFit:true,
    enableRowBody:true,
    getRowClass:function(record,rowIndex,p,ds){
        var cls = 'white-row';
        if (record.data.id % 2 == 0)
        {
            cls = 'red-row'
        } else {
            cls = 'yellow-row'
        }
        return cls;
    }
}

1//修改列的颜色，使用renderer属性配置如下方法
2var fn = function(value, cellmeta, record, rowIndex, columnIndex, store){
3    var value = record.get('color');
4    cell.attr = "style=background-color:" + value;
5    return data;
6}

    当然，如果只想修改Grid某一行的样式，还可以用grid.getView().addRowClass(r,css)；修改Grid某一单元格的样式，可以用Ext.get(grid.getView().getCell(r,c)).addClass(css)或grid.getVies().getRow(r).style.backgroundColor = "red"。

选择模型
    当单击某一单元格时，需要被选中的为整行，则使用RowSelectionModel----行选择模型。行选择模型默认是支持多选的，如只能单选，需要设置singleSelect参数。

1var grid = new Ext.grid.GridPanel ({
2    renderTo : 'grid',
3    store : store,
4    cm : cm,
5    sm : new Ext.grid.RowSelectionModel({singleSelect:true})
6)};

表格视图---Ext.grid.GridView
   Ext的表格控件都遵循MVC模型，Ext.data.Store可看做Model模型，Ext.grid.GridPanel中设置各种监听器可看做Controller控制器，而Ext.grid.GridView对应的就是View视图。通常情况下，不需要自行创建Ext.grid.GridView的实例，GridPanel会自行生成对应的实例，并可通过getView()函数来获取当前表格使用的视图实例。

1Ext.get('scroll').on('click',function(){
2    grid.getView().scrollToTop();
3})

    当然，我们也可以为GridView设置初始参数：

1viewConfig:{
2    columnsText:'显示的列',
3    scrollOffset:30,  //表格右侧滚动条的宽度，默认是20px
4    sortAscText:'升序',
5    sortDescText:'降序',
6    forceFit:true
7}

后台排序
    Grid的后台排序只需在配置Ext.data.Store的时候配置remoteSort:true即可，这样下次排序的时候，Store会向后台提交两个参数：sort和dir。sort表示需要排序的字段，dir表示升序或降序(ASC/DESC)。

属性表格控件----PropertyGrid

 1var gird = new Ext.grid.PropertyGrid({
 2    title:'属性表格',
 3    autoHeight:true,
 4    300,
 5    renderTo:'grid1',
 6    source:{
 7        "名字":"不告诉你",
 8        "创建时间":new Date(Date.parse('12/15/2007')),
 9        "是否有效":false,
10        "版本号":.01,
11        "描述":"恩，估计没有啥可说的"
12    }
13});

        上述代码就很容易地构建出一个可编辑的Grid，且各个字段的编辑器都是对应的。如果需要只能看不能动的PropertyGrid，则：

1grid.on("beforeedit",function(e){
2    e.cancel = true;
3    return false;
4});

    如果需要强制对name列排序，则需要修改Ext.grid.PropertyGrid.prototype.initComponent源码，将store.store.sort('name','ASC')注释掉即可。
    下面示例了自定义编辑器的代码：

 1var grid = new Ext.grid.PropertyGrid({
 2    title:'表格属性',
 3    autoHeight:true,
 4    300,
 5    renderTo:'grid',
 6    customEditors:{
 7        'Start Time':new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
 8    },
 9    soruce:{
10        'Start Time':'10:00 AM'
11    }
12});

分组表格控件----Group

 1var reader = new Ext.data.ArrayReader({},[
 2    {name:'id'},
 3    {name:'sex'},
 4    {name:'name'},
 5    {name:'desc'}
 6]);
 7
 8var data = [
 9    [1,'male','name1','descn1'],
10    [2,'female','name2','descn2'],
11    [3,'male','name3','descn3'],
12    [4,'female','name4','descn4'],
13    [5,'male','name5','descn5']
14];
15
16var store = new Ext.data.GroupingStore({
17    reader:reader,
18    data:data,
19    groupField:'sex',
20    sortInfo:{field:'id',direction:"ASC"}
21});
22
23var grid = new Ext.grid.GridPanel({
24    store:store,
25    height:300,
26    columns:[
27        {header:'编号',dataIndex:'id'},
28        {header:'性别',dataIndex:'sex'},
29        {header:'名称',dataIndex:'name'},
30        {header:'描述',dataIndex:'desc'}
31    ],
32    view:new Ext.grid.GroupingView(),
33    renderTo:'grid'
34});

    
    上述示例需要关注的是groupField，确定通过哪一项分组。令人困惑的是，GroupingStore要求必须设置sortInfo。同样，也可以通过grid.getView()来获取到Ext.grid.GroupingView的实例。

可拖放的表格
    

1var rz = new Ext.Resizable('grid',{
2    wrap:true,
3    minHeight:100,
4    pinned:true,
5    handles:'s'
6});
7
8rz.on('resize',grid.syncSize,grid);

    
    Resizable必须放在render之后，否则会出现问题。参数的构成：
    第一个参数'grid'：就是说这个可改变大小的条是在div id="grid"这个元素上起作用。
    wrap:true  这个参数会在构造Resizable时自动在指定id的外部包裹一层div。
    minHeight:100  限制改变大小的最小高度。
    pinned:true    pinned就是显示蓝色细线和上面的三个小点，突出提示。如果为true，则一直显示；false则只当鼠标放到上面时才出现。
    handles:'s'    's'即'south'。Ext中的东南西北对应上下左右，用来设置拖动的方向。

在同一个表格里拖放
    只需将grid的属性enableDragDrop设置为true，表格就支持了拖拽。但这样还不能实现真正意义上的拖拽，总会显示一个禁止放下的图标。这是因为Grid里面没有设置DropTarget，就是放置被拖动数据的目标。对grid.container进行如下设置，让表格的容器成为DropTarget：

 1var ddrow = new Ext.dd.DropTarget(grid.container,{
 2    ddGroup:'GridDD',
 3    copy:false,
 4    notifyDrop:function(dd,e,data){
 5        //选中了多少行
 6        var rows = dd.getDragData(e).rowIndex;
 7        if (typeof(index) == 'undefined')
 8        {
 9            return
10        }
11
12        //修改store
13        for(i = 0 ; i < rows.length;i++) {
14            var rowData = rows[i];
15            if (!this.copy) store.remove(rowData);
16            store.insert(index,rowData);
17        }
18    }
19});

Grid与右键菜单
    Grid提供了4个与右键菜单有关的事件：
    contextmenu : (Ext.EventObject e): 全局性的右键事件
    cellcontextmenu:(Grid this,Number rowIndex, Number cellIndex,Ext.EventObject e): 单元格的右键事件
    rowcontextmenu:(Grid this,Number rowIndex, Ext.EventObject e): 行上的右键事件
    headercontextmenu:(Grid this,Number colIndex, Ext.EventObject e): 表头的右键事件