Ext学习，应用Grid控件

1.引入必要的Ext支持

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="../../ext-all.js"></script>

2.Ext.Grid表格

 <script>
     //设置表头 sortable设置是否可以排序 renderer的值是个function会把该列的值传进去，获得function的返回值显示该列
     var cm = new Ext.grid.ColumnModel(
     [
      {header:'id',dataIndex:'id',sortable: true,width: 75},
   {header:'性别',datIndex:'sex',sortable:true,width:75,renderer:renderSex},
   {header:'name',dataIndex:'name',sortable: true,width: 75},
      {header:'des',dataIndex:'des',sortable: true,width: 100,renderer:renderDes}
  ]
  );
  //添加数据
 var data = [
    ['1','male','name1','des1'],
    ['2','female','name2','des2'],
    ['3','male','name3','des3'],
    ['4','female','name4','des4'],
    ['5','male','name5','des5']
 ];
 //按如下列解析数据
 var ds = new Ext.data.ArrayStore({
      fields:
   [
      {name:'id'},
   {name:'sex'},
   {name:'name'},
   {name:'des'}
   ]
 });
 ds.loadData(data);
 
 //装配表头和数据为表格 
 var grid = new Ext.grid.GridPanel(
 {
    el:'grid', //要渲染的位置ID
    ds:ds,
    cm:cm,
    stripeRows: true,
    height: 300,  //表格高度
       width: 380,   //表格宽度
    title: 'Array Grid',  //面板title
    stateful: true
 });
 grid.render();
 
 //判断是男就设置红色，是女就设置绿色
 function renderSex(value)
 {
     if(value == 'male')
  {
     return "<span  style='color:red;font-weight:bold;'> 红男</span><img src='user_gray.png' />";
  }
  else
  {
     return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
  }
 }
 
 
 /**
   value是当前单元格的值
     cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。
     record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。
     rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。
     columnIndex列号太简单了。
     store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据
 */
 //查看该行的详细信息
 function renderDes(value, cellmeta, record, rowIndex, columnIndex, store)
 {
    var str = "<input type='button' value='详细信息' onclick='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;
 }
  </script>

3.定义渲染的div

<div id="grid">
  </div>

4.给表第一列加为复选框

//设置多选sm既要放到cm里面也要放到grid里面
  var sm = new Ext.grid.CheckboxSelectionModel();

//设置表头 sortable设置是否可以排序 renderer的值是个function会把该列的值传进去，获得function的返回值显示该列
     var cm = new Ext.grid.ColumnModel(
     [
      //系统自动加上序号
      new Ext.grid.RowNumberer(),
   //添加checkbox
   sm,
      {header:'id',dataIndex:'id',sortable: true,width: 75},
   {header:'性别',datIndex:'sex',sortable:true,width:75,renderer:renderSex},
   {header:'name',dataIndex:'name',sortable: true,width: 75},
      {header:'des',dataIndex:'des',sortable: true,width: 100,renderer:renderDes}
  ]
  );

//装配表头和数据为表格 
 var grid = new Ext.grid.GridPanel(
 {
    el:'grid', //要渲染的位置ID
    ds:ds,
    cm:cm,
    sm:sm,    //添加checkbox
    height: 300,  //表格高度
       width: 380,   //表格宽度
    title: 'Array Grid',  //面板title
    stateful: true
 });
 grid.render();