FormPanel如何从后台load json数据的要点

首先我们要说的是数据格式,根据官方的说法,是必须要有success和data这两个属性的,我最开始用的时候因为不知道这一点,搞半天也不能导入数据。
如果你只需要从后台返回页面一个record那么应该是这样: {success:ture, data:{id:1, name:'tom', sex: 1}}
如果你需要从后台返回的是个list那么:{success:ture, xxx:[{id:1, name:'tom', sex: 1}, {id:2, name:'jerry', sex: 0}, {id:3, name:'jack', sex: 1}]}

接着说js。
可以利用继承,自己创建一个类型出来,这样容易代码重用,而且代码不用全混在一起也清晰些。

Ext.ns('Ext.william61');
Ext.william61.RoleForm = Ext.extend(Ext.form.FormPanel, {
initComponent : function(config) {
Ext.apply( this, {
frame:true,
buttonAlign: 'center',
height: 419,
labelWidth: 70,
bodyStyle:'padding:0 0 0 0',
reader: new Ext.data.JsonReader({successProperty:'success',totalProperty: 'totalProperty',root: 'xxx'},[
{name: 'id',mapping:'id',type:'int'},
{name: 'name',mapping:'name',type:'string'},
{name: 'sex',mapping:'sex',type:'int'}
]), // 这个部分很重要,关系到你时怎么把后台传来的json数据和页面上的数据部分对应的。如果你传回来的是数组,那么用root属性。如果只是一个数据,那么json数据中用data来标识数据那部分就可以了。
defaultType: 'textfield',
defaults: {width: 220},
items: [{
fieldLabel: 'ID',
name: 'id'
},{
fieldLabel: 'name',
name: 'name'
},{
fieldLabel: 'Sex',
name: 'sex'
}],
buttons: [{
text: 'load',
handler: this.onLoad
},{
text: 'save'
},{
text: 'cancel',
handler : function() {
role_win.hide();
}
}]
});

Ext.william61.RoleForm.superclass.initComponent.apply(this, arguments);

},
onLoad: function(){
alert('load....')
}
});

Ext.reg('rform', Ext.william61.RoleForm);

再就是在页面上个什么事件比如一个按钮的双击事件,或者grid的行双击事件触发一个handler
var role_win;
var role_form = new Ext.william61.RoleForm();

handler: function(){
myFormShow();
myFormLoad( 1 ); //根据情况弄一个id来,要利用这个id到后台查询记录
}

var myFormShow = function(){
if(!role_win){
role_win = new Ext.Window({
title:'测试',
width: 800 ,
height:450,
resizable: false,
draggable: false,
closeAction: 'hide',
modal:true,
items: [role_form] // [{id:'role_form', xtype:'rform'}]
});
}
role_win.show();
};
var myFormLoad = function(rId){
role_form.form.load({
url: 'p2/role_Info.action?roleId='+rId,
waitMsg: 'xxxxxxxxxxxx...',
success : function(form,action) {

},
failure : function(form,action) {

}
});
}
摘自:http://hi.baidu.com/william61/blog/item/705c3923a03cfaf9d7cae22a.html