一、表格控件Grid的使用
EXT中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。
1、创建表格的列信息:
view plaincopy to clipboardprint?
1. var cm=new Ext.grid.ColumnModel([
2. {header:'编号',dataIndex:'id'},
3. {header:'名称',dataIndex:'name'},
4. {header:'描述',dataIndex:'desn'}
5. ]);
2、添加数据信息:
view plaincopy to clipboardprint?
1. var data=[
2. ['1','name1','desn1'],
3. ['2','name1','desn1'],
4. ['3','name1','desn1'],
5. ['4','name1','desn1'],
6. ['5','name1','desn1']
7. ];
3、创建数据存储对象:
view plaincopy to clipboardprint?
1. var ds=new Ext.data.Store({
2. proxy:new Ext.data.MemoryProxy(data),
3. reader:new Ext.data.ArrayReader({},[
4. {name:'id'},
5. {name:'name'},
6. {name:'desn'}
7. ])
8. });
9. ds.load();//这个相当的重要
4、表格的列模型定义好了,原始数据和数据的转换也已经完成,剩下的只需要把它们装配在一起,我们的Grid就创建成功了。
view plaincopy to clipboardprint?
1. var grid=new Ext.grid.GridPanel({
2. renderTo:"grid",
3. store: ds,
4. height:600,
5. cm:cm
6. });
5、注意:Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方,所以,在HTML里应该有一个<div id='grid'></div>与之对应。
6、所有代码清单如下(已通过测试):
+ expand sourceview plaincopy to clipboardprint?
实验效果图如图1所示
图1一个简单的Grid
三、表格控件Grid的功能详解
第二部分简单介绍了如何创建简单的Grid,本章将对Grid的功能进行详细的分析。
3.1部分属性功能
1、默认情况下,Grid是可以拖放列,也可以改变列的宽度,如果要禁用这两个功能,在定义Grid对象时分别设置enableColumnMove和enableColumnResize为false即可。
2、如果希望显示斑马线效果,可以加上stripeRows:true
3、Grid还支持一种读取数据时的遮罩和提示功能,设置属性loadMask:true,在store.load()完成之前一直会显示"Loading…"
3.2自主决定每列的宽度
1、如果要定义宽度,只要设置该列的width属性即可,如下面的代码所示。效果图如图2所示。
view plaincopy to clipboardprint?
1. var cm=new Ext.grid.ColumnModel([
2. {header:'编号',dataIndex:'id',width:60},
3. {header:'名称',dataIndex:'name',width:180},
4. {header:'描述',dataIndex:'desn',width:200}
5. ]);
图2自定义每列的宽度
2、这样需要自己去计算每列的宽度,如果想让每列自动填满Grid,只需要viewConfig中的forceFit即可。使用forceFit后,Grid会根据你在cm里设置的width按比例分配,非常智能。实现代码如下:
view plaincopy to clipboardprint?
1. var grid=new Ext.grid.GridPanel({
2. renderTo:"grid",
3. stripeRows:true,//斑马线效果
4. loadMask:true,
5. store: ds,
6. height:600,
7. cm:cm,
8. viewConfig:{
9. forceFit:true
10. }
11. });
3、我们也可以考虑autoExpandColumn,它可以让指定列的宽度自动伸展,从而填充整个表格。代码如下
view plaincopy to clipboardprint?
1. var grid=new Ext.grid.GridPanel({
2. renderTo:"grid",
3. stripeRows:true,//斑马线效果
4. loadMask:true,
5. store: ds,
6. height:600,
7. cm:cm,
8. autoExpandColumn:'desn'
9. // viewConfig:{
10. // forceFit:true
11. // }
12. });
注意:autoExpandColum只能指定一列的id,注意,必须是id,原来我们设置的cm里面都没有id,现在为了使用autoExpandColumn,要给cm的desn设置id.于是在渲染时desn就可以自动延伸,否则会出错。
view plaincopy to clipboardprint?
1. var cm=new Ext.grid.ColumnModel([
2. {header:'编号',dataIndex:'id',width:60},
3. {header:'名称',dataIndex:'name',width:180},
4. {id:'desn',header:'描述',dataIndex:'desn',width:200}
5. ]);
3.3让Grid支持按列排序
在EXT中可以很方便地实现排序功能,只需要在定义列模型时增加sortable属性,如下面代码所示:
view plaincopy to clipboardprint?
1. var cm=new Ext.grid.ColumnModel([
2. {header:'编号',dataIndex:'id',width:60,sortable:true},
3. {header:'名称',dataIndex:'name',width:180},
4. {id:'desn',header:'描述',dataIndex:'desn',width:200}
5. ]);
效果图如图3所示
图3按列排序效果
3.4显示时间类型数据
尽管返回的JSON里都是数字和字符串,但是在EXT中我们同样可以从后台取得日期类型的数据,然后交给Grid进行格式化。
1、首先定义一组数据,其中最后一列是日期格式的数据。
view plaincopy to clipboardprint?
1. var data=[
2. ['1','name1','desn1','2009-09-17T02:58:04'],
3. ['2','name2','desn1','2009-09-17T02:58:04'],
4. ['3','name3','desn1','2009-09-17T02:58:04'],
5. ['4','name4','desn1','2009-09-17T02:58:04'],
6. ['5','name5','desn1','2009-09-17T02:58:04']
7. ];
2、接着我们在reader里面增加一行配置,除了设置name以外,还设置了type和dateFormat两个属性。代码如下:
view plaincopy to clipboardprint?
1. var store1= new Ext.data.Store({
2. proxy:new Ext.data.MemoryProxy(data),
3. reader:new Ext.data.ArrayReader({},[
4. {name:'id'},
5. {name:'name'},
6. {name:'desn'},
7. {name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
8. ])
9. });
3、同样的,我们还需要在cm里面增加一行配置:
view plaincopy to clipboardprint?
1. var cm=new Ext.grid.ColumnModel([
2. {header:'编号',dataIndex:'id',width:60,sortable:true},
3. {header:'名称',dataIndex:'name',width:180},
4. {id:'desn',header:'描述',dataIndex:'desn',width:200},
5. {header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
6. ]);
4、代码详细信息如下所示,效果图如图4所示。
+ expand sourceview plaincopy to clipboardprint?
图4具有时间数据的Grid
3.5自动显示行号和复选框
实际上,行号和复选框都是renderer的延伸。当然,复选框的功能要复杂得多。
1、自动显示行号:修改列模型cm,加入RowNumberer对象;
2、复选框:我们创建一个CheckboxSelectionModel()
3、详细代码如下,效果图如图5所示
view plaincopy to clipboardprint?
1. var sm=new Ext.grid.CheckboxSelectionModel();
2. var cm=new Ext.grid.ColumnModel([
3. new Ext.grid.RowNumberer(),
4. sm,
5. {header:'编号',dataIndex:'id',width:40,sortable:true},
6. {header:'名称',dataIndex:'name',width:180},
7. {id:'desn',header:'描述',dataIndex:'desn',width:200},
8. {header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
9. ]);
图5自动行号以及复选框效果图
3.6表格分页
Grid控件对性能要求较高,如果在一个Grid里面显示上千条记录,效率会有明显下降,所以必须考虑分页问题。
1、为Grid添加分页工具条:在前面代码的基础上修改grid代码:
view plaincopy to clipboardprint?
1. var grid1=new Ext.grid.GridPanel({
2. renderTo:"grid1",
3. stripeRows:true,//斑马线效果
4. loadMask:true,
5. store: store1,
6. height:200,
7. cm:cm,
8. viewConfig:{
9. forceFit:true
10. },
11. bbar:new Ext.PagingToolbar({
12. pageSize:10,
13. store: store1,
14. displayInfo:true,
15. displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
16. emptyMsg:"没有记录"
17. })
18. });
2、效果图如图6所示:
图6添加分页工具条
3、如果要真正实现分页,还需要通过后台脚本获得分页数据,这部分在此不再给出
四、可编辑表格控件——EditorGrid
EditorGrid可以直接在表格里面执行添加、删除、修改、查找等功能,然后一次性保持。还有可以动态修改某个单元格,这些单元格我们先暂时不能为空,保存时会进行检测,为空就无法保存,验证信息会给予提示。
4.1 制作一个简单的EditorGrid
1、定义列,代码如下:
view plaincopy to clipboardprint?
1. var cm=new Ext.grid.ColumnModel([
2. {header:'编号',dataIndex:'id',width:40,editor:new Ext.grid.GridEditor(
3. new Ext.form.TextField({
4. allowBlank:false
5. })
6. )},
7. {header:'名称',dataIndex:'name',width:180,editor:new Ext.grid.GridEditor(
8. new Ext.form.TextField({
9. allowBlank:false
10. })
11. )},
12. {id:'desn',header:'描述',dataIndex:'desn',width:200},
13. {header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
14. ]);
2、定义grid,注意此时是EditorGridPanel.
view plaincopy to clipboardprint?
1. var grid1=new Ext.grid.EditorGridPanel({
2. renderTo:"grid1",
3. store: store1,
4. height:200,
5. clicksToEdit:1,
6. cm:cm
7. });
3、默认情况下,需要双击单元格才能激活编辑器,从而进行修改,不过,也可以给Grid配置clickToEdit:1,这样就可以单击单元格激活编辑器,从而进行修改,如图7所示:
图7通过单击修改单元格
五、属性表格——PropertyGrid
属性表格扩展自EditorGridPanel,所以可以直接编辑右边的内容,注意:只有右边的,即使你单击左边的单元格,编辑器也会出现在右边。
定义的方法如下:
view plaincopy to clipboardprint?
1. <mce:script type="text/javascript"><!--
2. Ext.onReady(function(){
3. var grid=new Ext.grid.PropertyGrid({
4. title:"属性表格",
5. autoHeight:true,
6. width:400,
7. renderTo:'grid1',
8. source:{
9. "名字":"薛敬明",
10. "创建时间":new Date(Date.parse('12/15/2009')),
11. "是否有效":false,
12. "版本号":.01,
13. "描述":"估计没有啥说的"
14. }
15. });
16.
17. });
18.
19. // --></mce:script>
效果图如图8所示:
图8属性表格效果图
六、分组表格——Group
分组表格就是在普通表格的基础上,根据某一列的数据将表格中的数据分组显示的表格控件。
1、首先定义一组数据
view plaincopy to clipboardprint?
1. var data=[
2. ['1','male','name1','desn1'],
3. ['2','male','name2','desn1'],
4. ['3','female','name3','desn1'],
5. ['4','male','name4','desn1'],
6. ['5','female','name5','desn1'],
7. ['6','male','name6','desn1'],
8. ['7','male','name7','desn1']
9. ];
2、创建表格的列信息
view plaincopy to clipboardprint?
1. var sm=new Ext.grid.CheckboxSelectionModel();
2. var cm=new Ext.grid.ColumnModel([
3. new Ext.grid.RowNumberer(),
4. sm,
5. {header:'编号',dataIndex:'id',width:40,sortable:true},
6. {header:'性别',dataIndex:'sex',width:180},
7. {header:'名称',dataIndex:'name',width:200},
8. {header:'描述',dataIndex:'desn',width:200}
9. ]);
3、创建数据存储对象
view plaincopy to clipboardprint?
1. var store1= new Ext.data.GroupingStore({
2. proxy:new Ext.data.MemoryProxy(data),
3. reader:new Ext.data.ArrayReader({},[
4. {name:'id'},
5. {name:'sex'},
6. {name:'name'},
7. {name:'desn'}
8. ]),
9. groupField:'sex',
10. sortInfo:{field:'id',direction:"ASC"}
11. });
12. store1.load();
4、设计分组设计表格
view plaincopy to clipboardprint?
1. var grid1=new Ext.grid.GridPanel({
2. store: store1,
3. height:300,
4. cm:cm,
5. view:new Ext.grid.GroupingView(),
6. renderTo:"grid1"
7. });
5、代码清单如下,效果图如图9所示。
+ expand sourceview plaincopy to clipboardprint?
图9分组表格
六、可拖放的表格
首先我们看图10的效果图:
图10可拖放的表格
注意图10四周的蓝色细条,把鼠标放到上面,就可以用拖放改变表格的高度和宽度,实现这一效果并不难,也不需要对写好的Grid做大的修改,只要在原先的基础上添加如下代码:
view plaincopy to clipboardprint?
1. var rz=new Ext.Resizable('grid1',{
2. wrap:true,
3. minHeight:100,
4. pinned:true,
5. handles:'all'
6. });
7. rz.on('resize',grid1.syncSize,grid1);
注意:
(1) Resizable必须放在render之后,否则就会出现问题;
(2) handles:'all'代表可以向所有放心拖动表格
七、Grid与右键菜单
Grid提供了四个与右键菜单相关的事件:
(1) contextmenu:全局性的右键事件;
(2)cellcontextmenu:单元格上的右键事件
(3)rowcontextmenu:行上的右键事件
(4)headercontextmenu:表头的右键事件
以下代码我们实现一个行上的右键事件,代码清单如下,效果图如11所示
view plaincopy to clipboardprint?
1. var contextmenu=new Ext.menu.Menu({
2. id:'theContextMenu',
3. items:[{
4. text:'查看详情',
5. handler:function(){
6. }
7. }]
8. });
9. grid1.on("rowcontextmenu",function(grid,rowIndex,e){
10. e.preventDefault();
11. grid1.getSelectionModel().selectRow(rowIndex);
12. contextmenu.showAt(e.getXY());
13. });
图11右键菜单