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

php中文网

发布时间：2016-06-07 15:07:10

1649人浏览过

来源于php中文网

原创

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

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

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

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

if(value=='可用'){

return "可用/right.gif' />";

} else {

return "'color:red;font-weight:bold';>禁用'#\'" /wrong.gif' />";

}

}}

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

//改变列颜色自定义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学习(五)表格渲染与复选框
弹出这个单元格里的详细信息，主要代码如下：

//自定义renderner方法

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

var str="

"这个单元格的值是："+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;

}

列定义：

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对象：

//加入复选框组件，{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，大家注意看下。

html>

head>

meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

title>Hello Extjs4.2title>

link href="../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet">

script src="../ExtJS4.2/ext-all.js">script>

script src="../ExtJS4.2/locale/ext-lang-zh_CN.js">script>

script type="text/javascript">

//表格数据最起码有列、数据、转换原始数据这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';>可用span>img src=\'#\'" /right.gif' />";

} else {

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

}

}}

];

//定义数据

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 //表格会自动延展每列的长度，使内容填满整个表格

}

});

script>

head>

body>

h1>我的ExtJS4.2学习之路h1>

hr />

作者：束洋洋

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

h2>深入浅出ExtJS之表格视图--Ext.grid.GridViewh2>

div id="grid">div>

body>

html>

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

思考者日记网

mysql如何实现学生管理系统_mysql初级项目思路

mysql触发器适合新手使用吗_mysql学习建议

如何在mysql中使用数值函数_mysql数值函数用法说明

如何为学习准备mysql环境_mysql学习路线环境配置

mysql是否支持继承_mysql表结构继承的实现方式

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Hadoop2.4.1入门实例：MaxTemperature 下一篇：SQL 2005 try catch 的详细介绍

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档