为了减少异步加载的次数,于是想做一个动态表单全部由后台生成好的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"}]
- 大小: 52.9 KB
- 大小: 71 KB
分享到:
相关推荐
实现页面grid页面全动态,希望对您有帮助,请帮顶!
EXT 表单验证EXT 表单验证EXT 表单验证EXT 表单验证EXT 表单验证
使用 json 动态加载 Ext 表单数据。
ext_表单提交_数据校验 ext_表单提交_数据校验
EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP EXT提交表单,ASP
EXT动态新增一行 用的column布局,点击一个按钮能添加一行组件,如文本框,有下拉框等。
ext ext表单 ext表单设计器 表单设计
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
EXT异步提交FORM表单的使用和,以及EXT配合struts2,sprint2.5进行前台和后台的交互解释和运用.....
自己用Ext2.0做的Form表单,是个包。里面有最后生成界面的图片
简单的Ext应用实例,包括表单,与后台交互,基本组件等的使用。对于Ext初学者来说挺实用的,适用于Ext 3.0版本
NULL 博文链接:https://endeavor416.iteye.com/blog/260470
EXT表单验证之TextField,vtype 包括所有EXT中TextField的验证方式
Ext中表单中各种组件的布局,例如TextField,Combox,还有DateField控件的基本使用
Ext 添加功能form表单实例 适合Ext初学者
以Ext为基础动态操作数据库、动态从数据库出表单,只实现了基本功能还在继续写。
一个完整的Ext表单界面设计视频! 连接XML文件,动态显示表格数据
1. Ext.form.NumberField 2. Ext.form.TextArea 3. Ext.form.TriggerField 4. Ext.form.DateField 5. Ext.form.ComboBox 6. Ext.form.TimeField
ext js各种控件的描述 如树控件,文本框 grid表单 分页等等
ext扩展_Flash表单上传组件 一个不错的上传组件