花些时间捣鼓了下EditorGridPanel、PagingToolbar这两个控件,并写了个demo,顺便贴出使用细节和一些问题的解决方式和思路. 先看效果图.
数据加载完毕:
修改数据时:
用过EditorGridPanel的朋友应该会觉得最纠结的要属DateField字段了,因为它的格式问题很难设置.我还没有发现有属性可以直接解决这个问题,这里我提出我的解决方式,希望能够帮助到大家,如果大家有更好的解决方式,恳请共享下.让大家都能学习学习.
首先,在设置列模型的时候,DateField的renderer、editor属性是必须要设置的.设置的格式最好与数据库的DateTime格式保持一致,如:"yyyy-mm-dd/yyyy年mm月dd日",如果你只是设置这两个属性就想界面上显示的格式为你设定的.那么可能会令你失望了.它显示的格式为"NaN-NaN-NaN/NaN年NaN月NaN日",那么要如何解决这个问题呢.其实也很简单.只要在定义store的时候,指定field的类型就可以了(详细见源码).那么这个问题就算是解决了.然而新的问题接踵而至.当我们将修改完的数据进行保存的时候,会在插入数据库的时候引发异常,这也是因为格式的问题.我们在获取更新后的日期的时候,日期格式为GMT,并非我们预定义的.GMT是它的默认类型.那么如何将GMT类型变成我们需要的.可能大家会想到的有.通过split函数.这里我的做法是用GMT格式的日期去初始化Date对象.然后相应获取year、month、day.然后再拼接字符串.注意month要加1,month是从0-11计算的.那么到这里就算是结束了,从显示到数据入库.
关于PagingToolbar,注意的一点就是start必须是从0开始的,框架内部默认就是以接收0进行相应处理的.要么你可以去修改源码.效果等同.
到这里就算是介绍完了.
关于如何将更新的数据传递到后台,那么首选数据格式是json,我采用的是拼接字符串的方式,然后在后台转换成json对象,进行处理.拼接字符串肯定不是王道,也很麻烦,如果大家有更好的方法的,希望共享下.先谢过了.
JS代码:
Ext.onReady(function() {
var store = new Ext.data.JsonStore( {
url : "StudentServlet?action=list",
totalProperty : "totalCount",
root : "result",
fields : [ "id", "name", "sex", "age",{
name:"born",
type:"date",
dateFormat:"Y-m-d"
}],
autoLoad : {
params : {
start : 0,
limit : 5
}
}
});
var cm = new Ext.grid.ColumnModel( [ {
header : "编号",
dataIndex : "id",
sortable : true
}, {
header : "姓名",
dataIndex : "name",
sortable : true,
editor : new Ext.form.TextField()
}, {
header : "性别",
dataIndex : "sex",
sortable : true,
editor : new Ext.form.ComboBox( {
editable : false,
triggerAction : "all",
store : [ "男", "女" ]
})
}, {
header : "年龄",
dataIndex : "age",
sortable : true,
editor : new Ext.form.NumberField( {
minValue : 0,
maxValue : 120
})
}, {
header : "出生日期",
dataIndex : "born",
sortable : true,
width : 200,
renderer : Ext.util.Format.dateRenderer("Y年m月d日"),
editor : new Ext.form.DateField( {
format : "Y年m月d日"
})
} ]);
var editor = new Ext.grid.EditorGridPanel( {
title : "EditorGridPanel Test",
renderTo : "edit",
width : 620,
height : 300,
frame : true,
cm : cm,
store : store,
collapsible : true,
buttons : [ {
text : "提交",
handler : editorCommit
} ],
bbar : new Ext.PagingToolbar( {
pageSize : 5
store : store,
displayInfo : true,
beforePageText : "当前第",
afterPageText : "页,共{0}页",
displayMsg : "显示{0}-{1}条,共{2}条",
emptyMsg : "当前没有记录显示"
})
});
editor.show();
function editorCommit() {
var records = editor.getStore().getModifiedRecords();
if (records.length > 0) {
var txt = "[";
for ( var i = 0; i < records.length; i++) {
var cid = records[i].get("id");
var cname = records[i].get("name");
var cage = records[i].get("age");
var csex = records[i].get("sex");
var cborn = records[i].get("born");
//这里使用format格式函数
var time = new Date(cborn).format("Y-m-d");
//var year = date.getYear();
//var month = date.getMonth();//+1
//var day = date.getDate();
//var time = year + "-" + (month + 1) + "-" + day;
txt = txt + "{id:" + cid + ",name:'" + cname + "',age:"
+ cage + ",sex:'" + csex + "',born:'" + time
+ "'}";
if (i < records.length - 1)
txt = txt + ",";
}
txt = txt + "]";
Ext.Ajax.request( {
url : "StudentServlet",
success : function(flag) {
if (flag.responseText) {
editor.getStore().commitChanges()
Ext.Msg.alert("提示","更新成功");
} else {
Ext.Msg.alert("提示","更新失败");
}
},
failure : function() {
Ext.Msg.alert("提示","更新失败");
},
params : {
action : "modify",
json : txt
}
});
}
}
});
分享到:
相关推荐
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629629
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
NULL 博文链接:https://fourfire.iteye.com/blog/355853
因为项目的需求,实现一个可以编辑的tree,在网上找了一个牛人写的控件.Ext.ux.maximgb.tg.EditorGridPanel 把源码下载下来以后 不能运行,自己根据给出的列子,另写了一个小程序.不过并没有与数据库交互.
EditorGridPanel中嵌入ComboBox通常不会正常显示ComboBox的store中本想显示字段,而是显示的EditorGridPanel中 store的dataindex指定的字段内容。
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
NULL 博文链接:https://tonylian.iteye.com/blog/1735525
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
因为前段时间有两个专案要用到extjs技术,所以自己学了一段...grid,tree,显示树信息的TreePanel、用于显示表格的GridPanel及EditorGridPanel,还有代表应用程序窗口的Ext.Window,与数据库交付,希望对初学者带来帮助
ext 数据对象的定义 EditorGridPanel的使用 ext读取xml ext对各种数据格式的支持
感谢 Ericzhen 远离颠倒梦想,蕴籍无上清凉 这里引用它的资源 仅作分享 http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与服务器交互 27)Record 28)Store 29)TreePanel基本使用 30)使用树控件TreeNode 31)使用树控件TreeLoader 32)自定义TreeLoader
1 A framework apart 2 Back to the basics 3 Events, Components, and Containers ...8 The EditorGridPanel 9 Taking root with Trees 10 Toolbars and Menus 11 Drag and drop with Widgets
EditorGridPanel 使用本地store Toolbar工具菜单创建 分页工具栏创建 Window 弹出处理window窗口(模态窗口) MessageBox show(报错窗口、保存提示、选择窗口) alert prompt 实用工具类 JS异常捕捉 Ajax...
1.界面修改(css style): Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等,几乎都不同。Extjs对这些样式的设置都是由css完成的。如: 选中行的颜色就可用如下...
….36 6.2 可编辑的表格EditorGridPanel……….………………………………………………………………………..…….41 6.3 与服务器交互……….………………………………………………………………………………...
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、...73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65
73、Ext.grid.EditorGridPanel类 ……… 62 74、Ext.grid.PropertyGrid类 …………… 65 1、Ext类 addBehaviors(Object obj) : void 对选择的元素 应用事件侦听器,事件名以@附加在结尾,例如 addBehaviors({ ...