extjs--grid

来源：互联网发布：群ping软件编辑：程序博客网时间：2024/05/10 03:27

1、建立一个普通的grid表格（+日期格式的列）

var cm = new Ext.grid.ColumnModel([
     {header:'编号',dataIndex:'id'，sortable:true}, ---- width(自主定义每一列的宽度) -- sortable:true 在列显示升降序排序
     {header:'名称',dataIndex:'name'},
     {header:'描述',dataIndex:'descn'},

{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日') }
//renderer:Ext.util.Format.dateRenderer extjs的日期格式化方法。我们直接用类就行了

]);

    var data = [
     ['1','name1','descn1','2001-01-01'],
     ['2','name2','descn2','2001-01-02'],
     ['3','name3','descn3','2001-01-03'],
     ['4','name4','descn4','2001-01-04'],
     ['5','name5','descn5','2001-01-05'],
     ['6','name6','descn6','2001-01-06']

];

   var store = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader:new Ext.data.ArrayReader({},[
      {name:'id'},
      {name:'name},
      {name:'descn'},

      {name:'date',type:'date',dateFormat:'Y-m-d'}
     ])
   });
   store.load();

   var grid = new Ext.grid.GridPanel({
     renderTo:'grid',
     store:store,
     cm:cm,
//      enableColumnMove:false,
//      enableColumnResize:false,
//     stripRows:true,
//     loadMask:true,
    viewConfig:{
     forceFit:true
    },
     height:200
   });

表格可以拖放列，也可以改变列的宽度。如果要禁用这个两个功能，在定义表格对象时将enableColumnMove和enableColumnResize设置为false即可。

stripRows:设置斑马线

loadMask:加载。。。

viewConfig 里的 forceFit设置为true : 自动填满表格，当然，你也可以自己设定每列的具体长度如：

     {header:'编号',dataIndex:'id',width:45}, ---- width(自主定义每一列的宽度)
     {header:'名称',dataIndex:'name',width:80},
     {header:'描述',dataIndex:'descn',width:170}

2、比较复杂的grid（+css etc）

注解：

我们可以在renderer里得到多个参数，如下所示。

value：将要显示到单元格里的值

cellmeta：单元格的相关属性，主要有id和css

record：这个行的数据对象，如果要过的其他列的值，可以通过record.data["id"]的方式得到

3、为表格的行和列设置颜色

css样式：

---------------------------------------------------------

viewConfig:{
     forceFit:true,
     enableRowBody:true,
     getRowClass:function(record,rowIndex,p,ds){

      if(rowIndex%2 == 0){
       return 'yellow-row';
      }else {
       return 'green-row';
      }
     }
    },

4、自动显示行号和复选框

var cm = new Ext.grid.ColumnModel([
     new Ext.grid.RowNumberer(), -- 自动显示表格的行号
     {header:'编号',dataIndex:'id',sortable:true },
     {header:'性别',dataIndex:'sex',renderer:renderSex},
     {header:'名称',dataIndex:'name' },
     {header:'描述',dataIndex:'descn',renderer:renderDesc },
     {header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日') }
     //renderer:Ext.util.Format.dateRenderer extjs的日期格式化方法。我们直接用类就行了
   ]);

2> 删除某一行

Ext.get('remove').on('click',function(){ -- remove是个按钮
     store.remove(store.getAt(1));
     grid.view.refresh(); --刷新表格，查看删除后的记录
    });

5、选择模型

在定义Ext.grid.GridPanel时，默认使用RowSelectionModel--行选择模型。行选择模型是默认支持多选的，鼠标单击时按住shift或是Ctrl键可以选择多行。如果只希望选择一行，需要设置singleSelect参数

var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});

var grid = new Ext.grid.GridPanel({
     renderTo:'grid',
     store:store,
     cm:cm,
     sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
    viewConfig:{
     forceFit:true,
     enableRowBody:true,
     height:500
   });

“选择模型具体有什么作用？我还是不知道如何读取选中的行呀。”例如，当单击某一行时就会弹出一个对话框，并且显示显示当前行的一些信息

在上面的基础上在加上下面的代码

grid.on('click',function(){
     var selections = grid.getSelectionModel().getSelections();
     for(var i=0;i<selections.length;i++){
      var record = selections[i];
      Ext.Msg.alert('提示', record.get("id")+", "+record.get("name")+", "+record.get("descn"));
     }
   });