EXTJS----GRID笔记1

 制作一个简单的Grid

 1 var  cm  =   new  Ext.grid.ColumnModel([
 2      {header:'编号',dataIndex:'id'} ,
 3      {header:'名称',dataIndex:'name'} ,
 4      {header:'描述',dataIndex:'desc'}
 5 ]);
 6
 7 var  data  =  [
 8     [ 1 ,'name1','desc1'],
 9     [ 2 ,'name2','desc2'],
10     [ 3 ,'name3','desc3'],
11     [ 4 ,'name4','desc4'],
12     [ 5 ,'name5','desc5']
13 ];
14
15 var  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
24 store.load();
25
26 var  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。即：

1 var  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函数：

 1 Ext.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属性配置如下方法
2 var  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"。

 

原文地址：http://www.blogjava.net/zhengzhili/archive/2009/10/21/299161.html