Ext.grid.ColumnModel

1. Ext.grid.ColumnModel([{    
2.       id:          列的唯一标识，可以用于定义css，如：(.x-grid-td-topic b { color:#333 })    
3.       header:      列的名称    
4.       dataIndex:   在store中本列值的索引    
5.       sortable:    设置本列是否支持排序    
6.       renderer:    列值的渲染函数，定义函数如：function  renderName(value, cellmeta, record,   rowIndex, columnIndex, store){}    
7.       width :      列宽    
8.       hidden:true  是否隐藏本列    
9.   }]);   
10. function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {    
11.     var str = "<input type='button' value='查看详细信息' οnclick='alert(\"" +   
12.         "这个单元格的值是：" + value + "\\n" +   
13.         "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +   
14.         "这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +   
15.         "这是第" + rowIndex + "行\\n" +   
16.         "这是第" + columnIndex + "列\\n" +   
17.         "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +   
18.         "\")'>";   
19.     return str;   
20. }   
21.   
22. 来看看我们可以在render里用到多少参数：   
23.   
24.    1.value是当前单元格的值   
25.    2.cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。   
26.    3.record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。   
27.    4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。   
28.    5.columnIndex列号太简单了。   
29.    6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。 

 

 

 

var cm = new Ext.grid.ColumnModel({
  columns : [sm, new Ext.grid.RowNumberer(), {
     header : "userId",
     dataIndex : 'userId',
     hidden : true
    }, {
     header : "账号",
     dataIndex : 'username',
     width : 60
    }, {
     header : "姓名",
     dataIndex : 'fullname',
     width : 60
    },  {
     header : "性别",
     dataIndex : 'title',
     width : 50,
     renderer : function(value) {
      return value == '0' ? "女" : "男";
     }
    },
   
    {
     header : "民族",
     dataIndex : 'nation',
     width : 60
    },
   
    {
     header : "籍贯",
     dataIndex : 'her',
     width : 60
    },
   
    {
     header : "出生年月",
     dataIndex : 'birthday',
     width : 60
    },
   
    {
     header : "文化程度",
     dataIndex : 'education',
     width : 60
    },
   
    {
     header : "政治情况",
     dataIndex : 'political',
     width : 60
    }, {
     header : "参加工作时间",
     dataIndex : 'accessionTime',
     width : 100
    },
   
    {
     header : "职务",
     dataIndex : 'position',
     width : 60
    },
   
    {
     header : "职称",
     dataIndex : 'professionaTitle',
     width : 60
    },
   
    {
     header : "工龄",
     dataIndex : 'workAge',
     width : 60
    }, {
     header : "状态",
     dataIndex : 'status',
     width : 50,
     renderer : function(value) {
      return value == '0' ? "禁用" : "激活";
     }
    }, {
     header : '管理',
     dataIndex : 'userId',
     sortable:false,
     width : 100,
     renderer : function(value, metadata, record, rowIndex,
       colIndex) {
      var editId = record.data.userId;
      var editName = record.data.username;
      /*
      var str = '<button title="删除" value=" " class="btn-del" οnclick="AppUserView.remove('
        + editId + ')"></button>';*/
        
      var str = '&nbsp;<button title="编辑" value=" " class="btn-edit" οnclick="AppUserView.edit('
        + editId + ',\'' + editName + '\')"></button>';
      return str;
     }
    }],
  defaults : {
   sortable : true,
   menuDisabled : true,
   width : 100
  },
  listeners : {
   hiddenchange : function(cm, colIndex, hidden) {
    saveConfig(colIndex, hidden);
   }
  }
 });