表格说明

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，大功告成，看下效果：

ExtJS学习(三)Grid表格的更多相关文章

  1. ExtJS4.2学习(三)Grid表格（转）

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...

  2. 深入浅出ExtJS 第三章 表格控件

    3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...

  3. ExtJS4.2学习(四)Grid表格中文排序问题（转）

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/173.html --------------- ...

  4. sencha/extjs 动态创建grid表格

    //创建普通表格 id,父容器,标题,json数据字符串,列名(逗号分隔),json数据key即store的fields属性(逗号分隔) function createCommonTable(id, ...

  5. [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel

    使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...

  6. ExtJS学习(四)EditorGrid可编辑表格

    操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态.这个时候怎么办呢,看具体的实现吧. 双击点击的时候可以单元格的操作. 代码: <!DOCTYPE html& ...

  7. iView学习笔记(三)：表格搜索，过滤及隐藏列操作

    iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...

  8. ExtJs 日期相加，Grid表格列可编辑

    1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: {    header : "实际已交货量",   ...

  9. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

随机推荐

  1. 【BZOJ1835】【ZJOI2010】基站选址

    原题传送门 Description 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯基站,在第i个村庄建立基站的费用为Ci.如果在距 ...

  2. hdu 5115（2014北京—dp）

    题意: 有一排狼,每只狼有一个伤害A,还有一个伤害B.杀死一只狼的时候,会受到这只狼的伤害A和这只狼两边的狼的伤害B的和.如果某位置的狼被杀,那么杀它左边的狼时就会收到来自右边狼的B,因为这两只狼是相 ...

  3. hdu 5480(前缀和)

    题意:如果一个点,则这点的横竖皆被占领,询问矩阵是否全被占领. 思路:将被占领的x,y标记为1,用x表示1 - i的和 如果x轴的差为 x2 - x1 + 1则表示全被占领,y轴同理 #include ...

  4. hdu 5532（最长上升子序列）

    Input The first line contains an integer T indicating the total number of test cases. Each test case ...

  5. BZOJ3052(树上带修莫队)

    树上莫队的基本思路是把树按dfs序分块,然后先按x所在块从小到大排序,再按y所在块从小到大排序,处理询问即可. 这道题带修改,再加一个时间维即可. 设块大小为T,那么时间复杂度为$O(nT+\frac ...

  6. spine - unity3D（摘自博主softimagewht）

    摘自:(博主 http://www.cnblogs.com/softimagewht/p/4149118.html) //skeletonDataSkeletonAnimation skeletonA ...

  7. HTML的基本介绍

    HTML(HyperText Markup Language): 超文本标记语言,超文本就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. HTML是标记语言!!!!! HTML是标记语言! ...

  8. Python中模块之random的功能介绍

    random的功能介绍 random模块的方法如下: betavariate 获取一个range(0,1)之前的随机浮点数 方法:random.betavariate(alpha,beta) 返回值: ...

  9. C语言程序第一次作业

    (一)实验总结 1. 求圆面积和周长 (1)题目 输入圆的半径,计算圆的周长和面积. (2)流程图 (3)测试数据及运行结果 测试数据1:r=2 运行结果: (4)实验分析 没有问题 2.判断闰年 ( ...

  10. Java web 前端面试知识点总结

    经过几家大厂面试,目前成功拿到唯品会offer,分享一下我的面试知识点总结: 耦合性:也称块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块的独立性 ...