Ext.onReady(function(){
/*
* EditorGridPanel的工作过程
* 1、用户点击单元格
* 2、单元格按照预设的组件显示单元格的内容并处于编辑状态
* 3、离开单元格的编辑状态
* 4、更新编辑后的内容，出现三角号表示已经被修改过
* 5、程序内部变化：将记录设置为脏读数据状态，并将修改后的记录存放在Record类型的数组modified中。
*/
//准备数据
var data = [
{id:1,date:new Date(),name:"吕鹏",address:"中华人民共和国",bank:"中国光大银行",isFast:true},
{id:2,date:new Date(),name:"张三",address:"中华人民共和国",bank:"中国农业银行",isFast:false},
{id:3,date:new Date(),name:"李四",address:"中华人民共和国",bank:"中国商业银行",isFast:false},
{id:4,date:new Date(),name:"王五",address:"中华人民共和国",bank:"中国招商银行",isFast:false}
];
//Proxy
var proxy = new Ext.data.MemoryProxy(data);
//描述数据结构
var Order = Ext.data.Record.create(
[
{name:"ID",type:"int",mapping:"id"},//编号
{name:"DATE",type:"date",mapping:"date"},//日期
{name:"NAME",type:"string",mapping:"name"},//姓名
{name:"ADDRESS",type:"string",mapping:"address"},//地址
{name:"BANK",type:"string",mapping:"bank"},//银行
{name:"ISFAST",type:"boolean",mapping:"isFast"}//银行
]
);
//Reader
var reader = new Ext.data.JsonReader({},Order);
//Store 列模型中的dataIndex必须和Human结构中的name属性保持一致
var store = new Ext.data.Store({
proxy:proxy,
reader:reader,
autoLoad:true,
pruneModifiedRecords:true
});
//交易银行
var banks = [
["中国光大银行","中国光大银行"],
["中国农业银行","中国农业银行"],
["中国商业银行","中国商业银行"],
["中国招商银行","中国招商银行"]
]
//列模型
var cm = new Ext.grid.ColumnModel([
{header:"订单编号",dataIndex:"ID",width:60,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false}))},
{header:"下单日期",dataIndex:"DATE",width:140,renderer:new Ext.util.Format.dateRenderer("Y-m-d"),editor:new Ext.grid.GridEditor(new Ext.form.DateField({
format:"Y-m-d"
}))},
{header:"收货人姓名",dataIndex:"NAME",width:120,editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
{header:"收货人地址",dataIndex:"ADDRESS",editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
{header:"交易银行",dataIndex:"BANK",width:120,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
fields:["value","text"],
data:banks
}),
displayField:"text",
valueField:"value",
mode:"local",
triggerAction:"all",
readOnly:true,
emptyText:"请选择银行"
}))},
{header:"快递",dataIndex:"ISFAST",width:70,renderer:function(v){return v?"快递":"非快递"},editor:new Ext.grid.GridEditor(new Ext.form.Checkbox())}
]);
//EditorGridPanel定义
var grid = new Ext.grid.EditorGridPanel({
store:store,
cm:cm,
autoExpandColumn:"ADDRESS",
width:800,
autoHeight:true,
renderTo:"a",
autoEncode:true, //提交时是否自动转码
tbar:[{
text:"添加一行",
cls:"x-btn-text-icon",
handler:function(){
var initValue = {
ID:"",
DATE:new Date(),
NAME:"",
ADDRESS:"",
BANK:"",
ISFAST:false
};
var order = new Order(initValue);
grid.stopEditing();
grid.getStore().add(order);
//设置脏数据
order.dirty = true;
//只要一个字段值被修改了，该行的所有值都设置为脏读标记
order.modified = initValue;
if(grid.getStore().modified.indexOf(order) == -1){
grid.getStore().modified.push(order);
}
}
},{
text:"删除一行",
cls:"x-btn-text-icon",
handler:function(){
var sm = grid.getSelectionModel();
if(sm.hasSelection()){
Ext.Msg.confirm("提示","真的要删除选中的行吗？",function(btn){
if(btn == "yes"){
var cellIndex = sm.getSelectedCell();//获取被选择的单元格的行和列索引
var record = grid.getStore().getAt(cellIndex[0]);
grid.getStore().remove(record);
}
});
}else{
Ext.Msg.alert("错误","请先选择删除的行，谢谢");
}
}
},"-",{
text:"保存",
//icon:"",
cls:"x-btn-text-icon",
handler:function(){
var store = grid.getStore();
//得到修改过的Recored的集合
var modified = store.modified.slice(0);
//将数据放到另外一个数组中
var jsonArray = [];
Ext.each(modified,function(m){
//alert(m.data.ADDRESS);//读取当前被修改的记录的地址
//m.data中保存的是当前Recored的所有字段的值json，不包含结构信息
jsonArray.push(m.data);
});
var r = checkBlank(modified);
if(!r){
return;
}else{
//通过ajax请求将修改的记录发送到服务器最终影响数据库
Ext.Ajax.request({
method:"post",//最好不要用get请求
url:"../../../editGridServlet",
success:function(response,config){
var json = Ext.util.JSON.decode(response.responseText);
//grid.getStore().reload();
Ext.Msg.alert("提交成功",json.msg);
},
params:{data:Ext.util.JSON.encode(jsonArray)}
});
}
}
}]
});
//删除一行时，同步数据库
grid.getStore().on("remove",function(s,record,index){
var jsonArray = [record,data];//因为servlet只处理数组，所以先变成数组
if(record.data.ID != ""){
Ext.Ajax.request({
method:"post",
url:"../../../editGridServlet",
params:{data:Ext.util.JSON.encode(jsonArray),action:"delete"},
success:function(response,config){
var msg = Ext.util.JSON.decode(response.responseText);
//grid.getStore().reload();
Ext.Msg.alert("",msg.msg);
}
});
}
});
//验证是否输入的数据是有效的
var checkBlank = function(modified/*所有编辑过的和新增加的Record*/){
var result = true;
Ext.each(modified,function(record){
var keys = record.fields.keys;//获取Record的所有名称
Ext.each(keys,function(name){
//根据名称获取相应的值
var value = record.data[name];
//找出指定名称所在的列索引
var colIndex = cm.findColumnIndex(name);
//var rowIndex = grid.getStore().indexOfId(record.id);
//根据行列索引找出组件编辑器
var editor = cm.getCellEditor(colIndex).field;
//验证是否合法
var r = editor.validateValue(value);
if(!r){
Ext.MessageBox.alert("验证","对不起，您输入的数据非法");
result = false;
return;
}
});
});
return result;
}
});