Ext中Form加载数据

关于在Ext的Form中加载数据的问题。
一般关于表格数据进行操作的时候,我们的一般操作是分为两种:
1、 选中所需修改的行,然后点击对应的操作按钮进行操作。
2、 双击所需修改的行,弹出一个修改的对话框,进行操作。
于是就出现了一个问题,我们该如何在弹出的Form里加载需要修改的那些数据呢?
解决方案:
以下是一个按钮,及其对应的操作。

{text:'修改2',
handler : function(){
var item = body.getSelectionModel().getSelected();
if(!item){
Ext.Msg.alert("Please Select The Row");
}else{
myFormWin();
loadForm1.form.load({
url : 'updateGridAction.action?Name='+item.get('Name'),
waitMsg : '正在载入数据...',
success : function(form,action) {
Ext.example.msg('编辑', '载入成功!');
},
failure : function(form,action) {
Ext.example.msg('编辑', '载入失败');
}
});
}
}}


然后找到对应的myFormWin函数。

var loadForm1;
var myFormWin = function() {
if (!loadWindow) {
loadForm1 = new Ext.FormPanel( {
// collapsible : true,// 是否可以展开
//url : 'updateGrid.action',
//frame : true,
//title : '修改',
bodyStyle : 'padding:5px 5px 0',
width : 350,
waitMsgTarget : true,
//这个属性决定了load和submit中对数据的处理,list必须是一个集合类型,json格式应该是[]包含的一个数组
//reader: new Ext.data.JsonReader({root:'list'},
reader: new Ext.data.JsonReader({root:'rows'},
[{name: 'Name',mapping:'Name',type:'string'},
{name: 'Sex',mapping:'Sex',type:'boolean'},
{name: 'Phone',mapping:'Phone',type:'string'},
{name: 'Email',mapping:'Email',type:'string'}
]),
defaults : {
width : 230
},
baseCls: 'x-plain',
labelWidth: 55,
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'Name',
anchor:'100%'
},{
fieldLabel: 'Sex',
name: 'Sex',
anchor: '100%'
},{
fieldLabel: 'Phone',
name: 'Phone',
anchor: '100%'
},{
fieldLabel: 'Email',
name: 'Email',
anchor: '100%'
}]
/**
buttons : [ {
text : '保存',
disabled : false,
handler : function() {
if (loadForm1.form.isValid()) {
loadForm1.form.submit( {
url : 'AddLevel.action',
success : function(from, action) {
Ext.example.msg('保存成功', '添加级别成功!');
ds.load( {
params : {
start : 0,
limit : 30,
forumId : 4
}
});
},
failure : function(form, action) {
Ext.example.msg('保存失败', '添加级别失败!');
},
waitMsg : '正在保存数据,稍后...'
});
dialog.hide();
} else {
Ext.Msg.alert('信息', '请填写完成再提交!');
}
}
}, {
text : '取消',
handler : function() {
newFormWin.hide();
}
}]*/
});
var loadWindow = new Ext.Window({
iconCls:'btn-save',
title: '修改用户',
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: loadForm1,
buttons: [{ text: '确定'
},{ text: '取消'}]
});
loadWindow.show();
}
};


原理是这样的:
当选中一行的时候,再点击修改按钮,这个时候就执行了一些操作,首先是获取被选中行的value,然后是调用函数去创建加载数据的Form,这个Form又通过我们提供的URL去加载JSON格式的数据,这里可以从XML文件中读取或者是从数据库中读取。可以使用JSON的jar包,使得把对象转换成JSON格式的数据更加方便。保存成功后,重新加载一次dataStore。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值