ExtJS4.2学习(五)表格渲染与复选框

鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html

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

本博客介绍了如何对表格的列进行渲染及在行号前加入复选框。

以下是效果图：

代码：

/**
 * Grid
 * 此js演示了如何对列的样式进行渲染以及如何为表格添加复选框
 */ 
Ext.onReady(function(){  
    //js获取项目根路径
    function getRootPath(){
        var curWwwPath=window.document.location.href;
        var pathName=window.document.location.pathname;
        var pos=curWwwPath.indexOf(pathName);
        var localhostPaht=curWwwPath.substring(0,pos);
        var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
        return(localhostPaht+projectName);
    }
    
    //自定义renderner方法  
    function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){  
        if(value=='可用'){  
            return "<span style='color:green;font-weight:bold';>可用&nbsp;</span><img src='"+getRootPath()+"/js/component/images/right.gif' />";  
        } else {  
            return "<span style='color:red;font-weight:bold';>禁用&nbsp;</span><img src='"+getRootPath()+"/js/component/images/wrong.gif' />";  
        }    
    } 
    
    //定义列  
    var columns = [  
        {header:'编号',dataIndex:'id',width:50}, //sortable:true 可设置是否为该列进行排序  
        {header:'名称',dataIndex:'name',width:80},  
        {header:'描述',dataIndex:'descn',width:112},  
        {header:'状态',dataIndex:'status',width:80,renderer:renderDescn}  
      ];  
    //定义数据  
    var data =[  
        ['1','小王','描述01','可用'],  
        ['2','李四','描述02','禁用'],  
        ['3','张三','描述03','可用'],  
        ['4','束洋洋','思考者日记网','可用'],  
        ['5','高飞','描述05','禁用']  
    ];  
    //转换原始数据为EXT可以显示的数据  
    var store = new Ext.data.ArrayStore({  
        data:data,  
        fields:[  
           {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置  
           {name:'name'},  
           {name:'descn'},  
           {name:'status'}  
        ]  
    });  
    //加载数据  
    store.load();  
    
    /**
     * 经测试以下有些选项没有任何效果
     */ 
    //表格控件默认使用RowModel，按住shift或者ctrl键单击鼠标就可以选择多行，如果希望只选择一行，可以使用singleSelect:true  
    //我发现我在写的时候，不用的情况下，我试了发现默认就是不可多选的  
    //var sm = new Ext.grid.RowModel({singleSelect:true}); 
    var sm = new Ext.selection.CheckboxModel({checkOnly:true});  
    //创建表格  
    var grid = new Ext.grid.Panel({  
        renderTo:'grid', //渲染位置  
        width:450,  
        height:150,  
//        singleSelect:true,//--在同一时间只能单选一条记录（没什么用）  
//        multiSelect:true, //--允许在同一时间选择多项目记录,（没什么用）  
        selModel:sm,  //复选框
        store:store, //转换后的数据  
        columns:columns, //显示列  
        stripeRows:false, //斑马线效果  
        enableColumnMove: false, //禁止拖放列  
//        enableColumnResize: false, //禁止改变列宽度  
        loadMask:true, //显示遮罩和提示功能,即加载Loading……  
        forceFit:true, //自动填满表格 
        viewConfig:{  
//            columnsText:'显示的列', //--目前没找到这个属性 
//            scrollOffset:30, //--表格右侧为滚动条预留的宽度,默认为20（没什么用）  
//            sortAscText:'正序',//--没什么用  
//            sortDescText:'倒序',//-- 没什么用
            forceFit:true //表格会自动延展每列的长度，使内容填满整个表格  
        }  
    });  
});  

说明：1.对于当前的表格效果，上面js中的viewConfig可全部注释掉。2.在本博客的鸣谢地址中new 的是GridPanel（new Ext.grid.GridPanel），但在Extjs4.2版本中却未发现此类，因此new的是Panel（new Ext.grid.Panel），但两者效果一致。

1.对表格的列样式进行渲染，这点和easyui很像，本篇博客采用了引用自定义函数的方式：

在自定义renderner方法的renderDescn中有很多参数，在API中基本上没有找到，不过在本博客的鸣谢网址中有介绍（不知是从哪里找到的），下面复制过来：

1. value：将要显示到单元格里的值；
2. cellmeta：单元格的相关属性，主要有id和CSS；
3. record：这行的数据对象，如果需要获取其他列的值，可以通过record.data["id"]的方式得到，这个属性很重要，我们经常会用到；
4. rowIndex：行号，这里的行号指的是当前页中所有记录的顺序；
5. columnIndex：当前列的列号；
6. store：构造表格时传递的ds。表格里的所有数据都可以通过store获得。

2.在表格前加复选框也很简单，需要说明的是new了一个Ext.selection.CheckboxModel实例，CheckboxModel是一个选中的复选框的选择模式（具体参见API），然后将这个组件作为selModel的值。其中关于selModel，在API中的Ext.grid.Panel中说明此属性是一个selection model实例或配置对象，即表示表格采用怎样的选择模式。

后记：如有其他问题参见本文鸣谢的博客。