- 浏览: 635090 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (609)
- java (139)
- 数据库 (107)
- 微信 (23)
- IT生活 (5)
- web前端 (74)
- SSH (11)
- 设计模式 (12)
- 重要资料 (11)
- 其他 (15)
- java技巧 (23)
- 服务器 (9)
- 2D/GUI (3)
- JAVA3D (2)
- ANT (5)
- Apache项目 (19)
- 数据类型 (10)
- 报表 (3)
- Collections (6)
- SQL/JDBC (15)
- 开发类 (6)
- EJB (6)
- Email (6)
- 文件读写 (2)
- 游戏 (0)
- Flex (2)
- Generic (2)
- HIbernate (12)
- I18N (5)
- Java EE (9)
- java ME (4)
- JDK 6 (8)
- JNDI/LDAP (5)
- JSP (7)
- JSTL (2)
- 正则表达式 (2)
- 安全 (2)
- Struts2 (12)
- Spring (4)
- Web服务 (10)
- Xml (1)
- JavaScript (30)
- AJAX (7)
- 验证 (4)
- 上传下载 (1)
- office办公软件 (1)
- Android (2)
- IOS (0)
- Dubbo (3)
- memcached/redis (1)
- 小程序 (1)
- 微信公众号 (0)
最新评论
-
wf_wangfeng:
怎么我用第一种方法不行呢 alert(document.rea ...
当jsp页面完全加载完成后执行一个js函数 -
Lori_Liu:
有帮助,至少可以解决了目前所遇到的问题!谢谢..
当jsp页面完全加载完成后执行一个js函数 -
starbhhc:
String actionMessage = new Stri ...
Java读取txt文件乱码 -
starbhhc:
Sev7en_jun 写道GOOD
客气,互相交流。。
javaeye论坛规则小测验(答案)--star -
Sev7en_jun:
GOOD
javaeye论坛规则小测验(答案)--star
Ext本身就带有比较专业和酷的示例,这也是Ext明显强过其他js框架的地方,所以大家最好少看那些简单翻译一下就发表的示例,实在是浪费时间。关于一 些高级的用法,最佳方式就是看源码和其他比较好的扩展控件写法,当然园子里有几篇原创的Ext入门文章,看看也是有好处的。
为了运行下面的例子,请下载ext2.0,实际上我的例子也是从form-grid等例子修改而来的。
说明:做过C/S数据应用的程序员都明白,我们一般会定义数据源,然后再将其绑定到界面组件上。在EXT中,如果要测试界面组件是否正确,则用以下几行就能轻松搞定了:
var myData = [
['1','alex','lsj@21cn.com','13226612334',1995,'2007-10-20 10:00:00'],
['2','tom','tom@21cn.com','13826782334',1996,'2007-10-20 10:00:00'],
['3','cx8','cx@163.com', '139250802541',1999,'2008-11-12 08:00:00']
];
var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({},[
'id','Name','Email','Mobile',//通常的字符型可简单定义
{name: 'GradYear', type: 'int'},
{name: 'sCreatedDate', type: 'date', dateFormat: 'Y-m-d H:i:s'}
])
});
ds.loadData(myData);
要同时绑定到数据列表组件和编辑组件则可以如下办理:
var gridForm = new Ext.FormPanel({
id: 'member-form',frame: true, labelAlign: 'left',
layout: 'column', // 以列方式布局
……
items: [{
columnWidth: 0.6,layout: 'fit',//左边列放列表
items: {
xtype: 'grid', ds: ds, cm: colModel, sm: rsm,id:'member-grid',
title:'会员列表', border: true, stripeRows: true, frame: true, height: 450,
……
}
},{
xtype: 'fieldset',columnWidth: 0.4,//右边列放编辑板
……,
items: [
{fieldLabel:'姓名',name: 'Name',allowBlank: false,minLength:3,maxLength:8,anchor:'90%'},
{fieldLabel:'邮件',name: 'Email',vtype:'email',anchor:'90%'},
{fieldLabel:'手机',name: 'Mobile',anchor:'90%'},
{fieldLabel:'毕业年份',name: 'GradYear',xtype:'numberfield',anchor:'90%',value: '2008'},
{fieldLabel:'登记日期',name: 'sCreatedDate', xtype:'datefield',format: 'Y-m-d H:i:s', anchor:'90%'}
],
……
接下来我们要进行事件处理:
1) 列表当前选择记录和编辑框同步:
var rsm=new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("member-form").getForm().loadRecord(rec);
}
}
});
……
buttons: [
{text: '修改',handler:function(){
var frm=Ext.getCmp("member-form").getForm();
if(frm.isValid()) frm.updateRecord(rsm.getSelected()); //把右边编辑过的数据更新到左边的列表
}
},
{text: '清空',handler:function(){
var frm=Ext.getCmp("member-form").getForm();
frm.reset();
}
}
]
2) 新增记录到缓存:
function addNew() {
var r=rsm.getSelected().copy();
r.data['id']='';r.data['Name']='???';
var grid=Ext.getCmp("member-grid");
grid.stopEditing();
ds.insert(0, r);
ds.commitChanges();
grid.getView().refresh();
}
3) 从缓存中删除一条记录:
function deleteRec() {
if(rsm.getCount()<1) return;
var r=rsm.getSelected();
var grid=Ext.getCmp("member-grid");
grid.stopEditing();
ds.remove(r);
ds.commitChanges();
grid.getView().refresh();
}
要个性化显示也很简单,比如我们把1998年前毕业的用红色,否则用绿色标记:
function myRenderer(val){
if(val > 1998)
return '<span style="color:green;">' + val + '</span>';
return '<span style="color:red;">' + val + '</span>';
}var colModel = new Ext.grid.ColumnModel([
……,
{header: "毕业年份", width: 65, sortable: true, renderer: myRenderer, dataIndex: 'GradYear'},
……
]);
我们从使用中看出Ext设计十分灵活,让我有当初使用Delphi的那种爽的感觉!Ext的数据模型还是比较简单易懂的,基本可以应付常见的应用,我们也 看到对于新增加的记录,它还缺乏一些状态,就不如.NET框架中DataSet中那么强有力。可能是要考虑不能太过于复杂,否则js框架就太大了,毕竟是 要下载到客户端去的。但是我们仍然可以想一些办法区分,比如:r.data['id']='';这样我们在后台就可以知道这是新增加的记录。
再看看统计则要用扩展的分组统计组件。定义数据源稍微有些变化,多了几点:
function createGroupingStore(){
var myData = [
['1','alex','lsj@21cn.com','13226612334',1995,'2007-10-20 10:00:00'],
['2','tom','tom@21cn.com','13826782334',1995,'2007-10-20 10:00:00'],
['3','cx8','cx@163.com', '139250802541',1999,'2008-11-12 08:00:00']
];
var ds = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({},[
'id','Name','Email','Mobile',
{name: 'GradYear', type: 'int'},
{name: 'sCreatedDate', type: 'date', dateFormat: 'Y-m-d H:i:s'}
]),
groupField: 'GradYear',
remoteSort: false
});
ds.setDefaultSort('sCreatedDate','DESC');
ds.loadData(myData);
return ds;
}
var xg = Ext.grid;
var ds= createGroupingStore();
var rsm = new xg.CheckboxSelectionModel();
var summary = new Ext.grid.GroupSummary();
var grid = new xg.GridPanel({
ds: ds,
columns: [ rsm,
{
header: "姓名", width: 60, sortable: true, dataIndex: 'Name',summaryType: 'count',
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? '(' + v +' 人)' : '(1 人)');
}//自定义汇总处理
},
{header: "邮件", width: 175, sortable: true, dataIndex: 'Email'},
{header: "手机", width: 125, sortable: true, dataIndex: 'Mobile'},
{header: "毕业年份", width: 200, sortable: true, dataIndex: 'GradYear'},
{header: "登记日期", width: 85, sortable: true, summaryType: 'max',renderer: Ext.util.Format.dateRenderer('Y/m/d'), dataIndex: 'sCreatedDate'}
],
sm:rsm,
view: new Ext.grid.GroupingView({
forceFit:true,
showGroupName: true,
hideGroupedColumn: true
}),
plugins: summary,
frame:true,width: 800,height: 450,clicksToEdit: 0,
collapsible: true, animCollapse: false,trackMouseOver: false,
enableColumnMove: false,title: '分组列表',
iconCls: 'icon-grid',
renderTo: document.body
});
OK,有点感觉了吗?最好下载demo实际运行一下,请把例子解压到ext2.0/examples/demo目录,运行那form.html以及group.html即可
为了运行下面的例子,请下载ext2.0,实际上我的例子也是从form-grid等例子修改而来的。
说明:做过C/S数据应用的程序员都明白,我们一般会定义数据源,然后再将其绑定到界面组件上。在EXT中,如果要测试界面组件是否正确,则用以下几行就能轻松搞定了:
var myData = [
['1','alex','lsj@21cn.com','13226612334',1995,'2007-10-20 10:00:00'],
['2','tom','tom@21cn.com','13826782334',1996,'2007-10-20 10:00:00'],
['3','cx8','cx@163.com', '139250802541',1999,'2008-11-12 08:00:00']
];
var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({},[
'id','Name','Email','Mobile',//通常的字符型可简单定义
{name: 'GradYear', type: 'int'},
{name: 'sCreatedDate', type: 'date', dateFormat: 'Y-m-d H:i:s'}
])
});
ds.loadData(myData);
要同时绑定到数据列表组件和编辑组件则可以如下办理:
var gridForm = new Ext.FormPanel({
id: 'member-form',frame: true, labelAlign: 'left',
layout: 'column', // 以列方式布局
……
items: [{
columnWidth: 0.6,layout: 'fit',//左边列放列表
items: {
xtype: 'grid', ds: ds, cm: colModel, sm: rsm,id:'member-grid',
title:'会员列表', border: true, stripeRows: true, frame: true, height: 450,
……
}
},{
xtype: 'fieldset',columnWidth: 0.4,//右边列放编辑板
……,
items: [
{fieldLabel:'姓名',name: 'Name',allowBlank: false,minLength:3,maxLength:8,anchor:'90%'},
{fieldLabel:'邮件',name: 'Email',vtype:'email',anchor:'90%'},
{fieldLabel:'手机',name: 'Mobile',anchor:'90%'},
{fieldLabel:'毕业年份',name: 'GradYear',xtype:'numberfield',anchor:'90%',value: '2008'},
{fieldLabel:'登记日期',name: 'sCreatedDate', xtype:'datefield',format: 'Y-m-d H:i:s', anchor:'90%'}
],
……
接下来我们要进行事件处理:
1) 列表当前选择记录和编辑框同步:
var rsm=new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("member-form").getForm().loadRecord(rec);
}
}
});
……
buttons: [
{text: '修改',handler:function(){
var frm=Ext.getCmp("member-form").getForm();
if(frm.isValid()) frm.updateRecord(rsm.getSelected()); //把右边编辑过的数据更新到左边的列表
}
},
{text: '清空',handler:function(){
var frm=Ext.getCmp("member-form").getForm();
frm.reset();
}
}
]
2) 新增记录到缓存:
function addNew() {
var r=rsm.getSelected().copy();
r.data['id']='';r.data['Name']='???';
var grid=Ext.getCmp("member-grid");
grid.stopEditing();
ds.insert(0, r);
ds.commitChanges();
grid.getView().refresh();
}
3) 从缓存中删除一条记录:
function deleteRec() {
if(rsm.getCount()<1) return;
var r=rsm.getSelected();
var grid=Ext.getCmp("member-grid");
grid.stopEditing();
ds.remove(r);
ds.commitChanges();
grid.getView().refresh();
}
要个性化显示也很简单,比如我们把1998年前毕业的用红色,否则用绿色标记:
function myRenderer(val){
if(val > 1998)
return '<span style="color:green;">' + val + '</span>';
return '<span style="color:red;">' + val + '</span>';
}var colModel = new Ext.grid.ColumnModel([
……,
{header: "毕业年份", width: 65, sortable: true, renderer: myRenderer, dataIndex: 'GradYear'},
……
]);
我们从使用中看出Ext设计十分灵活,让我有当初使用Delphi的那种爽的感觉!Ext的数据模型还是比较简单易懂的,基本可以应付常见的应用,我们也 看到对于新增加的记录,它还缺乏一些状态,就不如.NET框架中DataSet中那么强有力。可能是要考虑不能太过于复杂,否则js框架就太大了,毕竟是 要下载到客户端去的。但是我们仍然可以想一些办法区分,比如:r.data['id']='';这样我们在后台就可以知道这是新增加的记录。
再看看统计则要用扩展的分组统计组件。定义数据源稍微有些变化,多了几点:
function createGroupingStore(){
var myData = [
['1','alex','lsj@21cn.com','13226612334',1995,'2007-10-20 10:00:00'],
['2','tom','tom@21cn.com','13826782334',1995,'2007-10-20 10:00:00'],
['3','cx8','cx@163.com', '139250802541',1999,'2008-11-12 08:00:00']
];
var ds = new Ext.data.GroupingStore({
reader: new Ext.data.ArrayReader({},[
'id','Name','Email','Mobile',
{name: 'GradYear', type: 'int'},
{name: 'sCreatedDate', type: 'date', dateFormat: 'Y-m-d H:i:s'}
]),
groupField: 'GradYear',
remoteSort: false
});
ds.setDefaultSort('sCreatedDate','DESC');
ds.loadData(myData);
return ds;
}
var xg = Ext.grid;
var ds= createGroupingStore();
var rsm = new xg.CheckboxSelectionModel();
var summary = new Ext.grid.GroupSummary();
var grid = new xg.GridPanel({
ds: ds,
columns: [ rsm,
{
header: "姓名", width: 60, sortable: true, dataIndex: 'Name',summaryType: 'count',
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? '(' + v +' 人)' : '(1 人)');
}//自定义汇总处理
},
{header: "邮件", width: 175, sortable: true, dataIndex: 'Email'},
{header: "手机", width: 125, sortable: true, dataIndex: 'Mobile'},
{header: "毕业年份", width: 200, sortable: true, dataIndex: 'GradYear'},
{header: "登记日期", width: 85, sortable: true, summaryType: 'max',renderer: Ext.util.Format.dateRenderer('Y/m/d'), dataIndex: 'sCreatedDate'}
],
sm:rsm,
view: new Ext.grid.GroupingView({
forceFit:true,
showGroupName: true,
hideGroupedColumn: true
}),
plugins: summary,
frame:true,width: 800,height: 450,clicksToEdit: 0,
collapsible: true, animCollapse: false,trackMouseOver: false,
enableColumnMove: false,title: '分组列表',
iconCls: 'icon-grid',
renderTo: document.body
});
OK,有点感觉了吗?最好下载demo实际运行一下,请把例子解压到ext2.0/examples/demo目录,运行那form.html以及group.html即可
发表评论
-
npm安装教程
2020-11-23 16:09 607一、使用之前,我们先来掌握3个东西是用来干什么的。 npm ... -
手机上万能返回上一页代替history.go(-1)
2016-05-13 11:25 782最近在做wap2.0的手机wap,写返回上一页的时候,开始 ... -
3.nodejs nodejs的mysql模块
2016-04-12 22:20 520安装nodejs的mysql模块首先要选定一个数据库,我选择 ... -
2.nodejs 使用Express4.x搭建第一个Web应用
2016-04-12 09:36 559Express4.x 是一个开源的node.js项目框架 ... -
1.nodejs windows 下安装nodejs
2016-04-12 09:34 3791.下载: 在nodejs的官方网站下载mis文件。ht ... -
Nodejs学习
2016-04-11 17:21 497将介绍如何利Javascript做为服务端脚本,通过Node ... -
HTML5做手机站页面字体显示很小的解决方法
2016-05-28 23:31 695HTML5做手机站需要加上一部分代码,不然字体会显示很小的 ... -
jquery 校验
2015-07-07 11:16 0EasyUI 验证框使用方法: ... -
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2015-05-20 09:49 562一、javascript函数实现: //JavaS ... -
//from提交表单 使用ajax异步读取,回调函数
2015-04-24 18:05 0<%@ page language="ja ... -
js获取带checkbox行的记录的Id值的两个方法
2015-04-09 14:44 653第一种: function updateProcess() ... -
基于注解的SpringMVC简单介绍
2015-04-03 11:58 565SpringMVC是一个基于DispatcherServle ... -
Linux环境下Nginx的安装
2014-03-28 13:26 456Linux下命令: /usr/local/nginx/s ... -
自用打印(二)
2014-03-19 17:30 539<html> <title> ... -
自用打印方法(一)
2014-03-19 17:25 432经过验证的,自用的。 ... -
各种微博分享代码
2014-03-19 15:56 880<HTML> <HEAD> ... -
JSP页面打印(二)
2014-03-18 11:04 734<HTML><HEAD><T ... -
JSP页面打印方法(一)
2014-03-18 10:57 3077JSP页面打印方法 方法一:function Print ... -
jquery和js初始化加载的多种方法
2014-01-20 14:48 875jquery和js初始化加载页面的区别: jquery:等 ... -
js自动刷新当前页面
2013-12-19 14:09 760reload 方法,该方法强 ...
相关推荐
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Extjs动态Grid的生成 htm
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
java extjs 添删改查用于初学者
extjs4 grid 包括form js代码
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
使用ExtJs相关的控件类自己实现的一个ExtJs的Grid列表的导出功能,可以导出列表的相关样式等
Extjs4 grid 导出为Excel 下载后放在网站(不放在网站中导出按钮不能会点击无响应,因为这里调用了swf文件)里可直接运行index.html测试 <link href='...
ExtJs 4.0 Grid 单元格合并控件封装
extjs grid示例代码extjs grid示例代码extjs grid示例代码extjs grid示例代码
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
title的header表头名、width宽度、dataIndex映射名都可以根据外部定义的xml进行读取,便于将ExtJs的Grid封装
用EXTjs写的增删改界面,界面很好看的
ExtJs Grid是否选择行,是:返回选择行record;否:返回false
ssh+extjs4.0grid删除数据实例,包没有了大家把包下载下来! 我的资源中有extjs的依赖包!
使用extjs4+servlet对extjs中grid数据进行填并实现增删改查等功能!
EXTJS grid导出EXCEL文件,源码可以直接导入MYECLIPSE使用,EXTJS版本3.2.0
ExtJs_grid.txt grid使用总结
extjs grid 多表头 插件 extjs grid 多表头 插件