ext动态表单

为了减少异步加载的次数，于是想做一个动态表单全部由后台生成好的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"}]