ExtJS学习(三)Grid表格

表格说明

Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。在EXT中，表格控件必须包含列定义信息，并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义，表格的数据存储器由Ext.data.Store来定义。store负责把各种各样（如二维数组、JSON对象数组、XML文本等）的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式，这样就不需要为每种数据格式写一个对应的实现了。

制作一个简单的表格及属性说明

    Ext.onReady(function(){  
        //定义列 
        var columns = [  
            {header:'编号',dataIndex:'id',sortable:true}, //sortable:true 可设置是否为该列进行排序 
            {header:'名称',dataIndex:'name',sortable:false},  
            {header:'描述',dataIndex:'descn',sortable:false}  
          ];  
        //定义数据 
        var data =[  
            ['1','张三','描述01'],  
            ['2','李四','描述02'],  
            ['3','王五','描述03'],  
            ['4','springok','springok.com'],  
            ['5','springok','springok.com']  
        ];  
        //转换原始数据为EXT可以显示的数据 
        var store = new Ext.data.ArrayStore({  
            data:data,  
            fields:[  
               {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置 
               {name:'name'},  
               {name:'descn'}  
            ]  
        });  
        //加载数据 
        store.load();  

        //创建表格 
        var grid = new Ext.grid.GridPanel({  
            renderTo:'springokgrid', //渲染位置 对应<div id="springokgrid"></div> id值
            store:store, //转换后的数据 
            columns:columns, //显示列 
            stripeRows:true, //斑马线效果 
            enableColumnMove: false, //禁止拖放列 
            enableColumnResize: false, //禁止改变列宽度 
            loadMask:true,   //显示遮罩和提示功能,即加载Loading…… 
            forceFit:true   //自动填满表格 
        });  
    });

测试：

表格的渲染
只需要在需要渲染的columns定义的时候将列的返回值更改为需要定义为HTML即可。

Ext.onReady(function(){  
        //定义列 
        var columns = [  
            {header:'编号',dataIndex:'id',sortable:true}, //sortable:true 可设置是否为该列进行排序 
            {header:'名称',dataIndex:'name',sortable:false},  
            {header:'状态',dataIndex:'descn',width:80,renderer:function(value){  
                if(value=='描述01'){  
                    return "<span style='color:green;font-weight:bold';>描述01</span>";  
                } else {  
                    return "<span style='color:red;font-weight:bold';>"+value+"</span>";  
                }  
            }}  
          ];  
        //定义数据 
        var data =[  
            ['1','张三','描述01'],  
            ['2','李四','描述02'],  
            ['3','王五','描述03'],  
            ['4','springok','springok.com'],  
            ['5','springok','springok.com']  
        ];  
        //转换原始数据为EXT可以显示的数据 
        var store = new Ext.data.ArrayStore({  
            data:data,  
            fields:[  
               {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置 
               {name:'name'},  
               {name:'descn'}  
            ]  
        });  
        //加载数据 
        store.load();  

        //创建表格 
        var grid = new Ext.grid.GridPanel({  
            renderTo:'springokgrid', //渲染位置 对应<div id="springokgrid"></div> id值
            store:store, //转换后的数据 
            columns:columns, //显示列 
            stripeRows:true, //斑马线效果 
            enableColumnMove: false, //禁止拖放列 
            enableColumnResize: false, //禁止改变列宽度 
            loadMask:true,   //显示遮罩和提示功能,即加载Loading…… 
            forceFit:true   //自动填满表格 
        });  
    });

效果：

为了程序的通用性就自定义了一个方法，在renderer里引入即可，如下代码：

function renderMotif(data, cell, record, rowIndex, columnIndex, store){  
            var value = record.get('name'); 
            if(value=="springok")
            cell.style="background-color:red";  
            return data;  
        }  

列中引用：

 {header:'态',dataIndex:'descn',width:80,renderer:renderMotif}

效果：

自定义渲染的方法

//自定义renderner方法

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){ }

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

构造一个Grid表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Hello Extjs4.2</title>  
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">  
<script src="../ExtJS4.2/ext-all.js"></script> 
<script src="d1.js"></script> 
<script  src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<h1>ExtJS4.2学习</h1>  
<hr />  
作者：springok  
<h2>ExtJS grid表格</h2>  
<div id="springokgrid"></div>
<div id="springok1"></div>
</body>
</html>
    Ext.onReady(function(){  
        function renderMotif(data, cell, record, rowIndex, columnIndex, store){  
            var value = record.get('name'); 
            if(value=="springok")
            cell.style="background-color:red";  
            return data;  
        } 


        //定义列 
        var columns = [  
            {header:'编号',dataIndex:'id',sortable:true}, //sortable:true 可设置是否为该列进行排序 
            {header:'名称',dataIndex:'name',sortable:false},  
            {header:'状态',dataIndex:'descn',width:80,renderer:renderMotif}
          ];  
        //定义数据 
        var data =[  
            ['1','张三','描述01'],  
            ['2','李四','描述02'],  
            ['3','王五','描述03'],  
            ['4','springok','springok.com'],  
            ['5','springok','springok.com']  
        ];  
        //转换原始数据为EXT可以显示的数据 
        var store = new Ext.data.ArrayStore({  
            data:data,  
            fields:[  
               {name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置 
               {name:'name'},  
               {name:'descn'}  
            ]  
        });  
        //加载数据 
        store.load();  

        //创建表格 
        var grid = new Ext.grid.GridPanel({  
            renderTo:'springokgrid', //渲染位置 对应<div id="springokgrid"></div> id值
            store:store, //转换后的数据 
            columns:columns, //显示列 
            stripeRows:true, //斑马线效果 
            enableColumnMove: false, //禁止拖放列 
            enableColumnResize: false, //禁止改变列宽度 
            loadMask:true,   //显示遮罩和提示功能,即加载Loading…… 
            forceFit:true   //自动填满表格 
        });  
    });

“`

OK，大功告成，看下效果：