结合EditorGridPanel与PagingToolbar的示例
花些时间捣鼓了下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
}
});
}
}
});