微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 数据库 > mysql教程 > 正文

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

php中文网
发布： 2016-06-07 15:07:10
原创
1640人浏览过

前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下ExtJs给我们带来的表渲染和复选框等功能。 有的人问我了，为什么你们的默认表样式和我做的效果图不一样呢，呵呵，那是因为我引入了ExtJS

前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。
"ExtJS4.2学习(五)表格渲染与复选框"
有的人问我了，为什么你们的默认表格样式和我做的效果图不一样呢，呵呵，那是因为我引入了ExtJS4.2的其他样式，并非默认的样式，换样式很简单，只需要更改Link引入的文件就可以很轻松的换各种样式，哇~是不是很给力啊，你敢信？
好了，不扯远了，下面看这章要做的效果图：

"ExtJS4.2学习(五)表格渲染与复选框"
怎么样，是不是很丰富？
先来说文字的颜色怎么变吧，详细你学过HTML+CSS一定知道怎么变，同理，在EXTJS里只需要用到renderer即可轻松做成HTML的效果，看下面的代码：

1

2

3

4

5

6

7

{header:'状态',dataIndex:'status',width:80,renderer:function(value){

            if(value=='可用'){

                return "<span style="color:green;font-weight:bold"&gt;可用</span&gt;<img src="%5C'#%5C'%22&lt;/code" alt="ExtJS4.2学习(五)表格渲染与复选框" &gt;<code&gt;/right.gif' /&gt;";

            } else {

                return "<span style="&lt;/code"&gt;<code&gt;'color:red;font-weight:bold';&gt;禁用"ExtJS4.2学习(五)表格渲染与复选框"'#\'" /wrong.gif' /&gt;";

            }

        }}

只需要在columns定义的时候将列的返回值更改为HTML即可。
名称列的颜色值变色也是同样的方法，这里为了方便，我就自定义了一个方法，在renderer里引入即可，如下代码：

1

2

3

4

5

6

//改变列颜色自定义renderner方法

function renderMotif(data, cell, record, rowIndex, columnIndex, store){

    var value = record.get('name');

    cell.style="background-color:"+value;

    return data;

}

列中引用：

1

{header:'名称',dataIndex:'name',width:80, renderer:renderMotif},

那上面的查询详细信息是什么呢？看下图：
"ExtJS4.2学习(五)表格渲染与复选框"
弹出这个单元格里的详细信息，主要代码如下：

1

2

3

4

5

6

7

8

9

10

11

//自定义renderner方法

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

    var str="<input type="button" value="查询详细信息"&gt;

        "这个单元格的值是："+value +"n"+

        "这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+

        "这个单元格对应行的record是："+record +",一行的数据都在里面n"+

        "这是第"+rowIndex+"行n"+

        "这是第"+columnIndex +"列n"+

        "这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"")' /&gt;";

    return str;

}

列定义：

1

{header:'描述',dataIndex:'descn',width:112,renderer:renderDescn}

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

自动显示行号和复选框都是renderer的延伸。先来说自动显示行号，在列模型columns中加入RowNumber对象即可，如下代码：

1

new Ext.grid.RowNumberer(), //自动显示行号

同样，复选框还是要修改columns模型加入SelectionModel对象：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//加入复选框组件，{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况，只允许用户通过复选框执行选中

    var sm = new Ext.selection.CheckboxModel({checkOnly:true});

    //创建表格

    var grid = new Ext.grid.GridPanel({

        renderTo:'grid', //渲染位置

        width:550,

        height:250,

        selModel:sm,

        store:store, //转换后的数据

        columns:columns, //显示列

        stripeRows:true, //斑马线效果

        //enableColumnMove: false, //禁止拖放列

        //enableColumnResize: false, //禁止改变列宽度

        loadMask:true //显示遮罩和提示功能,即加载Loading……

        //forceFit:true //自动填满表格

    });

注：{checkOnly:true}会解决在操作中不慎选中了某一行就会变成选中一行的情况，只允许用户通过复选框执行选中。
下面给出完整示例代码，代码中还说到了Ext.grid.GridView，大家注意看下。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

<code&gt;html&gt;

<code&gt;head&gt;

<code&gt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;

<code&gt;title&gt;Hello Extjs4.2<code&gt;title&gt;

<code&gt;link <code&gt;href="../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet"&gt;

<code&gt;script src="../ExtJS4.2/ext-all.js"&gt;<code&gt;script&gt;

<code&gt;script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"&gt;<code&gt;script&gt;

<code&gt;script type="text/javascript"&gt;

//表格数据最起码有列、数据、转换原始数据这3项

Ext.onReady(function(){

    //定义列

    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:function(value){

            if(value=='可用'){

                return "span style='color:green;font-weight:bold';&gt;可用span&gt;img src=\'#\'" /right.gif' /&gt;";

            } else {

                return "span style='color:red;font-weight:bold';&gt;禁用span&gt;img src=\'#\'" /wrong.gif' /&gt;";

            }

        }}

      ];

    //定义数据

    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 grid = new Ext.grid.GridPanel({

        renderTo:'grid', //渲染位置

        width:450,

        height:150,

        //selModel:sm,

        store:store, //转换后的数据

        columns:columns, //显示列

        stripeRows:true, //斑马线效果

        //enableColumnMove: false, //禁止拖放列

        //enableColumnResize: false, //禁止改变列宽度

        loadMask:true, //显示遮罩和提示功能,即加载Loading……

        //forceFit:true //自动填满表格

        viewConfig:{

            columnsText:'显示的列',

            scrollOffset:30, //表格右侧为滚动条预留的宽度,默认为20

            sortAscText:'正序',

            sortDescText:'倒序',

            forceFit:true //表格会自动延展每列的长度，使内容填满整个表格

        }

    });

});

<code&gt;script&gt;

<code&gt;head&gt;

<code&gt;body&gt;

<code&gt;h1&gt;我的ExtJS4.2学习之路<code&gt;h1&gt;

<code&gt;hr /&gt;

作者：束洋洋

开始日期：2013年11月10日 22:34:26

<code&gt;h2&gt;深入浅出ExtJS之表格视图--Ext.grid.GridView<code&gt;h2&gt;

<code&gt;div id="grid"&gt;<code&gt;div&gt;

<code&gt;body&gt;

<code&gt;html&gt;

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

思考者日记网

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：Hadoop2.4.1入门实例：MaxTemperature 下一篇：SQL 2005 try catch 的详细介绍
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
mysql安装后如何检查版本_mysql版本检查方法 使用mysql--version或mysqld--version命令可快速查看客户端或服务器版本；2.登录MySQL后执行SELECTVERSION();或SHOWVARIABLESLIKE‘version%’;可获取更精确的服务端版本信息；3.通过systemctlstatusmysql和which命令可确认服务运行状态及实例路径，避免多实例混淆。
2025-11-21 14:10:34
646
mysql如何优化复制性能_mysql复制性能优化方法 优化MySQL复制性能需从减少主从延迟入手，通过批量提交事务、合理设置sync_binlog和binlog格式提升主库写入效率；启用多线程复制（slave_parallel_workers=8-16）、优化I/O能力与relaylog存储布局加快从库应用速度；压缩网络协议、部署低延迟网络环境降低传输开销；结合级联复制、分库分表与半同步机制进行架构优化，并持续监控Seconds_Behind_Master及SLAVESTATUS指标，协同调优参数以突破瓶颈。
2025-11-21 14:05:23
863
mysql客户端安装后如何设置多实例_mysql客户端多实例配置教程 MySQL客户端通过配置连接参数或使用别名可高效管理多个服务器实例。首先明确客户端仅为连接工具，不运行服务，所谓“多实例”实为连接不同IP或端口的MySQL服务。常见场景包括本地多端口实例、远程数据库及环境切换。连接时使用标准命令格式：mysql-h[host]-P[port]-u[user]-p，如连接本地3306端口：mysql-h127.0.0.1-P3306-uroot-p，连接3307端口则修改对应端口号。为简化操作，可在~/.my.cnf中配置多个client段落作为别名，例如[cl
2025-11-21 14:01:02
670
mysql归档数据怎么筛选_mysql归档数据筛选条件设置方法 按时间、状态、数据量及外键关系筛选是MySQL归档关键。先通过时间字段结合索引提升效率，再排除活跃状态数据避免误删，分批处理减少系统压力，并校验外键确保数据一致性，操作前需测试验证并备份。
2025-11-21 13:58:02
282
mysql如何优化连接顺序_mysql JOIN连接顺序优化方法 应优先让过滤效果最强的表作为驱动表以减少中间结果集。MySQL采用嵌套循环JOIN，小结果集驱动大结果集可降低扫描次数，如users→orders→order_items顺序优于反向。通过EXPLAIN查看table、type、rows、key列判断执行计划，若大表被误选为驱动表则需优化。可用STRAIGHT_JOIN强制连接顺序，或拆分查询用临时表控制流程，同时确保JOIN字段和WHERE条件有合适索引，并定期ANALYZETABLE更新统计信息，复合索引应匹配查询模式，最终通过EXPLAIN
2025-11-21 13:50:05
1008
mysql如何开启innodb事务_mysql innodb事务启用方法 InnoDB事务默认开启，需确保存储引擎为InnoDB并通过SETautocommit=0控制事务，配合BEGIN、COMMIT、ROLLBACK语句使用，同时配置innodb_flush_log_at_trx_commit和transaction-isolation参数，最后通过ROLLBACK测试验证事务回滚功能是否正常。
2025-11-21 13:38:02
307
mysql如何使用SELECT字段_mysql SELECT字段查询技巧 避免SELECT*，明确指定所需字段以减少I/O和网络开销；2.使用AS设置字段或表别名提升可读性；3.结合UPPER、DATE、CONCAT等函数在查询时处理数据；4.用DISTINCT去重并结合LIMIT分页控制返回行数。
2025-11-21 13:31:53
936
如何在mysql中配置临时表路径_mysql临时表路径设置 MySQL临时表路径由tmpdir变量控制，用于指定临时文件存储位置。通过SHOWVARIABLESLIKE‘tmpdir’可查看当前路径，如/tmp；可通过修改配置文件[mysqld]下tmpdir=/data/mysql_tmp或启动命令设置；需创建目录并赋权chownmysql:mysql、chmod700；重启服务生效。tmpdir仅影响磁盘临时文件，内存临时表仍用MEMORY引擎；大查询排序、临时表、ALTERTABLE等操作会使用该路径；建议避免系统盘，Linux用单路径，Windo
2025-11-21 13:27:12
421
mysql如何使用LEFT JOIN_mysql LEFT JOIN操作方法 LEFTJOIN以左表为主返回所有记录，右表无匹配时字段为NULL；通过ON指定关联条件，常用于统计包含零记录的场景，如查询所有用户及其订单（含未下单者），需注意避免WHERE子句误筛空值、确保连接字段类型一致并建立索引提升性能。
2025-11-21 13:26:02
236
mysql如何优化日志写入_mysql日志写入性能优化 优化MySQL日志写入性能需从redolog、binlog、磁盘I/O和应用层入手：1.增大innodb_log_file_size至1GB~2GB，提升innodb_log_buffer_size至64MB~256MB，设置innodb_flush_log_at_trx_commit=2以降低刷盘频率；2.启用binlog组提交，调整sync_binlog值平衡安全与性能，使用binlog_row_image=minimal减少日志量；3.将日志文件置于SSD/NVMe独立磁盘，采用XFS文件
2025-11-21 13:02:02
725
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部