欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  数据库

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

程序员文章站 2022-04-25 17:29:20
...

前几章做的例子,你有没有发现太单调啦?呵呵,相信聪明的你一定知道,光显示文字,那这功能太弱爆了吧,现在我们来看下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 "可用ExtJS4.2学习(五)表格渲染与复选框/right.gif' />";

} else {

return "'color:red;font-weight:bold';>禁用ExtJS4.2学习(五)表格渲染与复选框'#\'" /wrong.gif' />";

}

}}

只需要在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="

"这个单元格的值是:"+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对象:

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

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学习(五)表格渲染与复选框

思考者日记网