ExtJS 配置和表格控件使用

extjs时一套ajax控件,本人认为它是目前我见过最好最美的js控件库，所以非常有学习和使用价值，如果你还没有接触过extjs或者压根对其不感兴趣，那么没有必要看下去了
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>之间添加如下代码：
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
ext.onready(function(){
ext.messagebox.alert('helloworld','hello world');
})
</script>
(3) 这里注意<script></script>不能用</script>取代
(4) js的导入顺序不要更改
(3) 如果弹出一个helloworld的对话框，则代表配置成功。
二、表格控件grid的使用
ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等使用功能。我们首先介绍如何制作一个简单的grid。
1、创建表格的列信息：
复制代码代码如下:
var cm=new ext.grid.columnmodel([
{header:'编号',dataindex:'id'},
{header:'名称',dataindex:'name'},
{header:'描述',dataindex:'desn'}
]);
2、添加数据信息：
复制代码代码如下:
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
3、创建数据存储对象：
复制代码代码如下:
var ds=new ext.data.store({
proxy:new ext.data.memoryproxy(data),
reader:new ext.data.arrayreader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();//这个相当的重要
.
4、表格的列模型定义好了，原始数据和数据的转换也已经完成，剩下的只需要把它们装配在一起，我们的grid就创建成功了。
复制代码代码如下:
var grid=new ext.grid.gridpanel({
renderto:grid,
store: ds,
height:600,
cm:cm
});
5、注意：ext.grid.grid的renderto属性指示ext将表格渲染到什么地方，所以，在html里应该有一个<p id='grid'></p>与之对应。
6、所有代码清单如下(已通过测试)：
复制代码代码如下:
<%@ page language="c#" autoeventwireup="true" codefile="grid.aspx.cs" inherits="ext_example_grid" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="head1" runat="server">
<title>grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid">
</p>
</form>
</body>
</html>
实验效果图如图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所示。
复制代码代码如下:
var cm=new ext.grid.columnmodel([
{header:'编号',dataindex:'id',width:60},
{header:'名称',dataindex:'name',width:180},
{header:'描述',dataindex:'desn',width:200}
]);
图2 自定义每列的宽度
2、这样需要自己去计算每列的宽度，如果想让每列自动填满grid,只需要viewconfig中的forcefit即可。使用forcefit后，grid会根据你在cm里设置的width按比例分配，非常智能。实现代码如下：
复制代码代码如下:
var grid=new ext.grid.gridpanel({
renderto:grid,
striperows:true,//斑马线效果
loadmask:true,
store: ds,
height:600,
cm:cm,
viewconfig:{
forcefit:true
}
});
3、我们也可以考虑autoexpandcolumn,它可以让指定列的宽度自动伸展，从而填充整个表格。代码如下
复制代码代码如下:
var grid=new ext.grid.gridpanel({
renderto:grid,
striperows:true,//斑马线效果
loadmask:true,
store: ds,
height:600,
cm:cm,
autoexpandcolumn:'desn'
// viewconfig:{
// forcefit:true
// }
});
注意：autoexpandcolum只能指定一列的id,注意，必须是id,原来我们设置的cm里面都没有id,现在为了使用autoexpandcolumn,要给cm的desn设置id.于是在渲染时desn就可以自动延伸，否则会出错。
复制代码代码如下:
var cm=new ext.grid.columnmodel([
{header:'编号',dataindex:'id',width:60},
{header:'名称',dataindex:'name',width:180},
{id:'desn',header:'描述',dataindex:'desn',width:200}
]);
3.3 让grid支持按列排序
在ext中可以很方便地实现排序功能，只需要在定义列模型时增加sortable属性，如下面代码所示：
复制代码代码如下:
var cm=new ext.grid.columnmodel([
{header:'编号',dataindex:'id',width:60,sortable:true},
{header:'名称',dataindex:'name',width:180},
{id:'desn',header:'描述',dataindex:'desn',width:200}
]);
效果图如图3所示
图3 按列排序效果
3.4 显示时间类型数据
尽管返回的json里都是数字和字符串，但是在ext中我们同样可以从后台取得日期类型的数据，然后交给grid进行格式化。
1、首先定义一组数据，其中最后一列是日期格式的数据。
复制代码代码如下:
var data=[
['1','name1','desn1','2009-09-17t02:58:04'],
['2','name2','desn1','2009-09-17t02:58:04'],
['3','name3','desn1','2009-09-17t02:58:04'],
['4','name4','desn1','2009-09-17t02:58:04'],
['5','name5','desn1','2009-09-17t02:58:04']
];
2、接着我们在reader里面增加一行配置，除了设置name以外，还设置了type和dateformat两个属性。代码如下：
复制代码代码如下:
var store1= new ext.data.store({
proxy:new ext.data.memoryproxy(data),
reader:new ext.data.arrayreader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateformat:'y-m-dth:i:s'}
])
});
3、同样的，我们还需要在cm里面增加一行配置：
复制代码代码如下:
var cm=new ext.grid.columnmodel([
{header:'编号',dataindex:'id',width:60,sortable:true},
{header:'名称',dataindex:'name',width:180},
{id:'desn',header:'描述',dataindex:'desn',width:200},
{header:'时间',dataindex:'date',type:'date',renderer:ext.util.format.daterenderer('y年m月d日')}
]);
4、代码详细信息如下所示，效果图如图4所示。
复制代码代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="head1" runat="server">
<title>grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid1">
</p>
</form>
</body>
</html>
图4 具有时间数据的grid
3.5 自动显示行号和复选框
实际上，行号和复选框都是renderer的延伸。当然，复选框的功能要复杂得多。
1、自动显示行号：修改列模型cm,加入rownumberer对象；
2、复选框：我们创建一个checkboxselectionmodel()
3、详细代码如下，效果图如图5所示
复制代码代码如下:
var sm=new ext.grid.checkboxselectionmodel();
var cm=new ext.grid.columnmodel([
new ext.grid.rownumberer(),
sm,
{header:'编号',dataindex:'id',width:40,sortable:true},
{header:'名称',dataindex:'name',width:180},
{id:'desn',header:'描述',dataindex:'desn',width:200},
{header:'时间',dataindex:'date',type:'date',renderer:ext.util.format.daterenderer('y年m月d日')}
]);
图5 自动行号以及复选框效果图
3.6 表格分页
grid控件对性能要求较高，如果在一个grid里面显示上千条记录，效率会有明显下降，所以必须考虑分页问题。
1、为grid添加分页工具条：在前面代码的基础上修改grid代码：
复制代码代码如下:
var grid1=new ext.grid.gridpanel({
renderto:grid1,
striperows:true,//斑马线效果
loadmask:true,
store: store1,
height:200,
cm:cm,
viewconfig:{
forcefit:true
},
bbar:new ext.pagingtoolbar({
pagesize:10,
store: store1,
displayinfo:true,
displaymsg:'显示第{0}条到{1}条记录,一共{2}条',
emptymsg:没有记录
})
});
2、效果图如图6所示：
图6 添加分页工具条
3、如果要真正实现分页，还需要通过后台脚本获得分页数据，这部分在此不再给出
四、可编辑表格控件——editorgrid
editorgrid可以直接在表格里面执行添加、删除、修改、查找等功能，然后一次性保持。还有可以动态修改某个单元格，这些单元格我们先暂时不能为空，保存时会进行检测，为空就无法保存，验证信息会给予提示。
4.1 制作一个简单的editorgrid
1、定义列，代码如下：
复制代码代码如下:
var cm=new ext.grid.columnmodel([
{header:'编号',dataindex:'id',width:40,editor:new ext.grid.grideditor(
new ext.form.textfield({
allowblank:false
})
)},
{header:'名称',dataindex:'name',width:180,editor:new ext.grid.grideditor(
new ext.form.textfield({
allowblank:false
})
)},
{id:'desn',header:'描述',dataindex:'desn',width:200},
{header:'时间',dataindex:'date',type:'date',renderer:ext.util.format.daterenderer('y年m月d日')}
]);
2、定义grid,注意此时是editorgridpanel.
复制代码代码如下:
var grid1=new ext.grid.editorgridpanel({
renderto:grid1,
store: store1,
height:200,
clickstoedit:1,
cm:cm
});
3、默认情况下，需要双击单元格才能激活编辑器，从而进行修改，不过，也可以给grid配置clicktoedit:1，这样就可以单击单元格激活编辑器，从而进行修改，如图7所示：
图7 通过单击修改单元格
五、属性表格——propertygrid
属性表格扩展自editorgridpanel,所以可以直接编辑右边的内容，注意：只有右边的，即使你单击左边的单元格，编辑器也会出现在右边。
定义的方法如下：
复制代码代码如下:
<script type="text/javascript"></script>
效果图如图8所示：
六、分组表格——group
分组表格就是在普通表格的基础上，根据某一列的数据将表格中的数据分组显示的表格控件。
1、首先定义一组数据
复制代码代码如下:
var data=[
['1','male','name1','desn1'],
['2','male','name2','desn1'],
['3','female','name3','desn1'],
['4','male','name4','desn1'],
['5','female','name5','desn1'],
['6','male','name6','desn1'],
['7','male','name7','desn1']
];
2、创建表格的列信息
复制代码代码如下:
var sm=new ext.grid.checkboxselectionmodel();
var cm=new ext.grid.columnmodel([
new ext.grid.rownumberer(),
sm,
{header:'编号',dataindex:'id',width:40,sortable:true},
{header:'性别',dataindex:'sex',width:180},
{header:'名称',dataindex:'name',width:200},
{header:'描述',dataindex:'desn',width:200}
]);
3、创建数据存储对象
复制代码代码如下:
var store1= new ext.data.groupingstore({
proxy:new ext.data.memoryproxy(data),
reader:new ext.data.arrayreader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'desn'}
]),
groupfield:'sex',
sortinfo:{field:'id',direction:asc}
});
store1.load();
4、设计分组设计表格
复制代码代码如下:
var grid1=new ext.grid.gridpanel({
store: store1,
height:300,
cm:cm,
view:new ext.grid.groupingview(),
renderto:grid1
});
5、代码清单如下，效果图如图9所示。
复制代码代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="head1" runat="server">
<title>分组表格控件</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<p id="grid1">
</p>
</form>
</body>
</html>
图9 分组表格
六、可拖放的表格首先我们看图10的效果图：
图10 可拖放的表格
注意图10四周的蓝色细条，把鼠标放到上面，就可以用拖放改变表格的高度和宽度，实现这一效果并不难，也不需要对写好的grid做大的修改，只要在原先的基础上添加如下代码：
复制代码代码如下:
var rz=new ext.resizable('grid1',{
wrap:true,
minheight:100,
pinned:true,
handles:'all'
});
rz.on('resize',grid1.syncsize,grid1);
注意：
(1) resizable必须放在render之后，否则就会出现问题；
(2) handles:'all'代表可以向所有放心拖动表格
七、grid与右键菜单
grid提供了四个与右键菜单相关的事件：
（1） contextmenu:全局性的右键事件；
（2）cellcontextmenu:单元格上的右键事件
（3）rowcontextmenu:行上的右键事件
（4）headercontextmenu:表头的右键事件
以下代码我们实现一个行上的右键事件，代码清单如下，效果图如11所示
复制代码代码如下:
var contextmenu=new ext.menu.menu({
id:'thecontextmenu',
items:[{
text:'',
handler:function(){
}
}]
});
grid1.on(rowcontextmenu,function(grid,rowindex,e){
e.preventdefault();
grid1.getselectionmodel().selectrow(rowindex);
contextmenu.showat(e.getxy());
});
图11 右键菜单

ExtJS 配置和表格控件使用_extjs

推荐信息