extjs 配置与表格使用

   日期:2024-12-26    作者:aqwl7 移动:http://3jjewl.riyuangf.com/mobile/quote/53801.html

引用 :http://www.jb51.net/article/20027.htm

http://wenku.baidu.com/view/226ce70cba1aa8114431d9bf.html

中文网站:http://extjs.org.cn/download

extjs看你使用的版本,ext有4个版本,extjs1,extjs2,是完全不要钱的,extjs3用于商业用途是要交钱的按使用的人算

2.0.2版本http://extjs.org.cn/node/3

 

 

ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本。如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS。 
本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新版本为3.0,但是本文主要介绍2.2版本。 
一、ExtJS下载以及配置 
1、下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下载) 
2、配置过程,假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyExample(该目录用于存放你自己写的代码),配置过程如下: 
(1) 新建一个页面文件Helloworld.html 
(2) 在<head>和</head>之间添加如下代码: 


(3) 这里注意<script></script>不能用</script>取代 
(4) js的导入顺序不要更改 
(3) 如果弹出一个HelloWorld的对话框,则代表配置成功。 
二、表格控件Grid的使用 
EXT中的表格功能非常强大,包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的Grid。 
1、创建表格的列信息: 


2、添加数据信息: 


3、创建数据存储对象: 


4、表格的列模型定义好了,原始数据和数据的转换也已经完成,剩下的只需要把它们装配在一起,我们的Grid就创建成功了。 


5、注意:Ext.grid.Grid的renderTo属性指示EXT将表格渲染到什么地方,所以,在HTML里应该有一个<div id='grid'></div>与之对应。 
6、所有代码清单如下(已通过测试): 


3、我们也可以考虑autoExpandColumn,它可以让指定列的宽度自动伸展,从而填充整个表格。代码如下 


注意:autoExpandColum只能指定一列的id,注意,必须是id,原来我们设置的cm里面都没有id,现在为了使用autoExpandColumn,要给cm的desn设置id.于是在渲染时desn就可以自动延伸,否则会出错。 


3.3 让Grid支持按列排序 
在EXT中可以很方便地实现排序功能,只需要在定义列模型时增加sortable属性,如下面代码所示: 


2、接着我们在reader里面增加一行配置,除了设置name以外,还设置了type和dateFormat两个属性。代码如下: 


3、同样的,我们还需要在cm里面增加一行配置: 


4、代码详细信息如下所示,效果图如图4所示。 

3.6 表格分页 
Grid控件对性能要求较高,如果在一个Grid里面显示上千条记录,效率会有明显下降,所以必须考虑分页问题。 
1、为Grid添加分页工具条:在前面代码的基础上修改grid代码: 


2、定义grid,注意此时是EditorGridPanel. 


2、创建表格的列信息 


3、创建数据存储对象 


4、设计分组设计表格 


5、代码清单如下,效果图如图9所示。

 

图9 分组表格

首先我们看图10的效果图:

图10 可拖放的表格

注意图10四周的蓝色细条,把鼠标放到上面,就可以用拖放改变表格的高度和宽度,实现这一效果并不难,也不需要对写好的Grid做大的修改,只要在原先的基础上添加如下代码:


注意: 
(1) Resizable必须放在render之后,否则就会出现问题; 
(2) handles:'all'代表可以向所有放心拖动表格 
七、Grid与右键菜单 
Grid提供了四个与右键菜单相关的事件: 
(1) contextmenu:全局性的右键事件; 
(2)cellcontextmenu:单元格上的右键事件 
(3)rowcontextmenu:行上的右键事件 
(4)headercontextmenu:表头的右键事件 
以下代码我们实现一个行上的右键事件,代码清单如下,效果图如11所示 

 

 


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号