爲了減少異步加載的次數，於是想做一個動態表單全部由後臺生成好的json數據送到前端解析
貼貼效果:
下面是代碼:
調用的地方:
title : '基本信息',
layout : 'fit',
items : [new web.ui.classmanage.classPanel({
classID : this.classID,
pModule : 'classes',
pMethod : 'subClassDetailsGeneralInfo'
})]
表單容器:
Ext.namespace("web.ui.classmanage");
web.ui.classmanage.classPanel = function(itemConfig) {
Ext.apply(this, itemConfig);
web.ui.classmanage.classPanel.superclass.constructor.call(this);
};
Ext.extend(web.ui.classmanage.classPanel, Ext.Panel, {
baseForm : '',
myMask : '',
filterAttName : [],
initComponent : function() {
this.myMask = new Ext.LoadMask(Ext.getBody(), {
msg : "Please wait..."
});
var baseClassGeneralForm = new web.ui.classmanage.baseClassGeneralPanel({
classID : this.classID,
pModule : this.pModule,
pMethod : this.pMethod
});
this.baseForm = baseClassGeneralForm;
var config = {
layout : 'fit',
frame : true,
items : [baseClassGeneralForm],
buttons : [{
text : 'Save',
handler : this.updateNode,
scope : this
}, {
text : 'Cancel',
handler : this.calcel
}]
};
Ext.apply(this, config);
web.ui.classmanage.classPanel.superclass.initComponent.call(this);
},
updateNode : function() {
var data = '';
this.baseForm.getForm().items.each(function(item, index, length) {
if (item.isDirty() && !item.disabled) {
if (item.getName() != "AutoNumber"
&& (item.getName() != "" && item.getName().length != 0)) {
data += encodeURIComponent(item.getName()) + '='
+ encodeURIComponent(item.getValue()) + '&';
}
}
});
if (data == '') {
return;
}
data = Ext.encode(Ext.urlDecode(data));
this.myMask.show();
this.submit(data);
},
cancel : function() {
},
submit : function(data) {
var classID = this.classID;
var mask = this.myMask;
Ext.Ajax.request({
// 請求地址
url : contextPath + '/classes/index.shtml',
method : 'POST',
// 提交參數組
params : {
pmethod : 'update',
updateData : data,
classID : classID
},
success : function(response) {
var jsonObj = eval(response.responseText);
if (!jsonObj.state) {
Ext.Msg.alert("提示", jsonObj.message);
}
mask.hide();
},
failure : function() {
mask.hide();
}
});
}
});
生成的json字符串 :
[{"anchor":"95%","disabled":false,"fieldLabel":"Name","id":"","name":"30","readOnly":false,"value":"ECR8","xtype":"textfield"},{"anchor":"95%","disabled":false,"fieldLabel":"Description","id":"","name":"38","readOnly":false,"value":"ECR8ddd","xtype":"textfield"},{"anchor":"95%","defaultValue":"","disabled":false,"displayField":"text","editList":false,"fieldLabel":"Enabled","hiddenName":"40","id":"","listID":"","mode":"local","name":"","readOnly":false,"store":{"data":[["0","No"],["1","Yes"]],"fields":["value","text"]},"triggerAction":"all","value":"Yes","valueField":"value","xtype":"listSelect"},{"anchor":"95%","disabled":false,"fieldLabel":"Icon","id":"","name":"708","readOnly":false,"value":"","xtype":"textfield"},{"anchor":"95%","disabled":true,"fieldLabel":"Class","id":"","name":"","readOnly":false,"value":"文檔","xtype":"textfield"},{"anchor":"95%","disabled":false,"fieldLabel":"AutoNumber","hideId":"autoNumberIds","id":"","leftStore":[{"id":"43620","name":"項目編號"}],"name":"AutoNumber","readOnly":false,"rightStore":[{"id":"39300","name":"yyy"},{"id":"43620","name":"項目編號"},{"id":"45540","name":"ceshi_刪除u"},{"id":"45800","name":"NEW"},{"id":"45900","name":"文檔編號"},{"id":"45920","name":"NewAuto_EDIT2"},{"id":"48840","name":"aaa"},{"id":"69905","name":"aa"},{"id":"72926","name":"文檔測試編號2"}],"value":"項目編號","xtype":"staticTriggerSelector"},{"anchor":"95%","disabled":false,"fieldLabel":"","id":"autoNumberIds","name":"57","readOnly":false,"value":"43620","xtype":"hidden"}]