extjs表格grid功能详解

/**
 * EXTJS表格grid功能详解
 *
 * 1.在默认情况下，表格是可以拖放列，也可以改变列的宽度。
 * 如果要禁用这两个功能，在定义表格对象时将enableColumnMove和enableColumnResize设置为false即可。
 * 2.读取数据时的遮罩和提示，设置属性loadMask:true，在store.load()完成之前会一直显示“Loading…”
 * 3.表格显示斑马线效果，可以加上stripeRows:true
 * 4.使用forceFit后，表格的右边的空白区域正好比纵向滚动条宽一点，在高度超出屏幕或者表格高度时可以保证只会出现纵向滚动条，而不会出现横向滚动条。
 * 5.使用autoSizeColumns/forceFit重新计算全部宽度外，还可已考虑autoExpandColumn，它可以指定列的宽度自动伸展，
 * 从而填充整个表格。 eg:autoExpandColumn:'descn'
 *
 * autoExpandColumn只能指定一列的id。注意：必须是id
 *
 * 6. 解决中文排序问题
 * 需要重写Ext.data.Store的applySort函数，代码如下：
 *  Ext.data.Store.prototype.applySort = function() {
 *   if (this.sortInfo && !this.remoteSort) {
 *       var s = this.sortInfo, f = s.field;
 *       var st = this.fields.get(f).sortType;
 *      var fn = function(r1, r2) {
 *           var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
 *           if (typeof(v1) == "string") {
 *               return v1.localeCompare(v2);
 *           }
 *           return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
 *       };
 *       this.data.sort(s.direction, fn);
 *       if(this.snapshot && this.snapshot != this.data) {
 *           this.snapshot.sort(s.direction, fn);
 *       }
 *   }
 *};
 *
 *
 *把这段代码加到ext-all.js文件最后，或者放到HTML页面的最上面，总之是要在EXT初始化之后，实际代码调用之前执行。
 *
 *sortInfo描述的是页面的排列，代码如下：
 *var store = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader: new Ext.data.ArrayReader({},[
      {name:'id'},
      {name:'name'},
      {name:'descn'}
     ]),
     sortInfo:{field:"name",direction:"ASC"}
    });

 *
 *7.日期显示格式化
  *ar 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-dTH:i:s'}
         ])
     });
    
     需要在cm里增加一行配置，并且配置了renderer属性用来格式化日期格式的数据，代码如下：
     var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'},
        {header:'日期',dataIndex:'date', renderer: Ext.util.Format.dateRenderer('Y-m-d')}
    ]);

 *
 *8.表格渲染
 *renderer的一些参数应用
 *  function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
          var str = "<input type='button' value='查看详细信息' οnclick='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;
 }
 分析上面的代码：
 value: 将要显示到单元格里的值
 cellmeta: 单元格的相关属性，主要有id和css
 record: 这行的数据对象，如果需要获得其他列的值，可以通过record.data[“id”]的方法得到
 rowIndex: 行号，这里的行号指的是当前页中所有记录的顺序
 columnIndex: 当前列的列号
 store: 构造表格时传递的ds。也就是说，表格里的所有数据都可以通过store获得。

 *9.给表格的行和列设置颜色
 *  代码如下：
 viewConfig : {
             forceFit : true,
             enableRowBody : true,
             getRowClass :function(record, rowIndex, p, ds) {
                 var cls = 'white-row';
                 switch (record.data.color) {
                     case '#FBF8BF' :
                         cls = 'yellow-row'
                         break;
                     case '#99CC99' :
                         cls = 'green-row'
                         break;
                     case '#F5C0C0' :
                         cls = 'red-row'
                         break;
                 }
                 return cls;
             }
         }

   用代码动态修改列的颜色值：
  function renderMotif(data, cell, record, rowIndex, columnIndex, store){
          var value = record.get('color')
           cell.attr = "style=background-color:" + value;
           return data;
      }
  
      var cm = new Ext.grid.ColumnModel([
          {header: 'name', dataIndex: 'name'},
          {header: 'sex', dataInex: 'sex'},
          {header: 'color', dataIndex: 'color', renderer: renderMotif}
      ]);
  当然，如果只修改表格的某一行的样式，可以用以下代码：
  grid.getView().addRowClass(r,css)
  修改表格某一单元格的样式可以用下面的方式实现：
  Ext.get(grid.getView().getCell(r,c).addClass(css))
  或
  grid.getView().getRow(r).style.backgroundColor=”red”;
  
  10. 自动显示行号
     在列模型cm中加入RowNumberer对象。
 var cm = new Ext.grid.ColumnModel([
   new Ext.grid.RowNumberer(),
   {header:'编号',dataIndex:'id',width:120},
   {header:'名称',dataIndex:'name',width:120 },
   {header:'描述',dataIndex:'descn',width:120 },
   {header:'性别',dataIndex:'sex',width:80 }
 ]);
 但是，它总伴随着一个小问题。如果删除中间一行，那么行号就不会连续了，所以需要刷新表格的视图，让表格重新计算行号。
 Ext.get('remove').on('click',function(){
  store.remove(store.getAt(1));
 });
 上面代码是获得ID为remove的按钮的删除事件。然而，我们接下来修改这段代码：
 Ext.get('remove').on('click',function(){
  store.remove(store.getAt(1));
  grid.view.refresh();  //执行删除后执行刷新表格视图。刷新后，表格就会调用renderer()重新计算所有行号。
 });
 
 11.选择模型
 var grid = new Ext.grid.GridPanel({
    autoHeight:true,
    renderTo:'grid',
    store:store,
    cm:cm,
    sm:new Ext.grid.RowSelectionModel({singleSelect:true})
   });
 另外一种选择模式是CellSelectionModel——单元格选择模式。每次只允许选择一个单元格，在EditorGrid里默认使用的就是CellSelectionModel。
 也可以将EditorGrid的选择模式设置为RowSelectionModel，从而达到选择一行的效果。
　　   读取选择行信息，代码如下：
 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"));
    }
   });
  先从表格中获得SelectionModel，再从选择模型中获得当前选中的数据，selections.length是选中的记录条数。
  循环读取selections，里面的每一个元素都是一条记录，所有的数据都在里面。
  如果需要判断是否选择了记录，只需要判断selections.length是否等于0
 
 */

Ext.onReady(function() {
   // 1. cm支持给每列设置宽度，如果不设置，它会取一个默认值，默认宽度是100px。
   var cm = new Ext.grid.ColumnModel([{
      header : '编号',
      dataIndex : 'id'
     }, {
      header : '名称',
      dataIndex : 'name'
     }, {
      header : '描述',
      dataIndex : 'descn'
      
     }]);
   // 2.定义数据
   var data = [['1', 'name1', 'descn1'], ['2', 'name2', 'descn2'],
     ['3', 'name3', 'descn3'], ['4', 'name4', 'descn4'],
     ['5', 'name5', 'descn5']];

   // 2.定义数据存储store,负责把各种各样的原始数据（如二维数组、JSON对象数组、XML文本等）转换成dExt.data.Record类型的对象
   var store = new Ext.data.Store({
      proxy : new Ext.data.MemoryProxy(data),
      reader : new Ext.data.ArrayReader({}, [{
           name : 'id'
          }, {
           name : 'name'
          }, {
           name : 'descn'
           
          }])
     });
   store.load();

   var grid = new Ext.grid.GridPanel({
      autoHeight : true,
      renderTo : 'grid',
      store : store,
      cm : cm,
      stripeRows : true,
      loadMask : true,
      viewConfig : {
       foreFit : true
      }
     });

  });