ExtJs自定义带Form效能的Window
c_a_3();
ExtJs自定义带Form功能的Window
之前在项目遇到一个问题就是使用很多的Window进行新增，修改的操作，每个Window都添加上一个FormPanel。
1、添加起来比较麻烦。2、在Window再添加FormPanel肯定生成的Div会更多了，而且阅读起来也比较麻烦。
3、还有就是很多同学喜欢使用使用field.setValue去赋值，其它FormPanel中就提供了loadRecord。很方便进行FormPanel的字段赋值。
在这里自己写了一个自定义的WindowForm，由于这是之前写的，所以没有写注释，而且现在也不太
记录
混凝土 养护记录下载土方回填监理旁站记录免费下载集备记录下载集备记录下载集备记录下载
一些绿细节了，只是提供一下代码。
Ext.ux.WindowForm = function(cfg) {
Ext.apply(this, {
labelWidth : 100,
labelAlign : 'right',
minimizable : true,
resizable : false,
layout : 'form',
closeAction : 'hide',
modal:true,
defaultType : 'textfield'
});
Ext.ux.WindowForm.superclass.constructor.apply(this, arguments);
}
Ext.extend(Ext.ux.WindowForm, Ext.Window, {
initComponent : function() {
this.form = this.createForm();
Ext.ux.WindowForm.superclass.initComponent.call(this);
this.bodyCfg = {
tag : 'form',
cls : this.baseCls + '-body',
method : this.method || 'POST',
id : this.formId || Ext.id()
};
if (this.fileUpload) {
this.bodyCfg.enctype = 'multipart/form-data';
}
this.initItems();
this.addEvents(
/**
* @event clientvalidation
* 如果配置项monitorValid为true，那么为
通知
关于发布提成方案的通知关于xx通知关于成立公司筹建组的通知关于红头文件的使用公开通知关于计发全勤奖的通知
验证的状态(valid
* state)该事件将不断地触发。 If the monitorValid config
* option is true, this event fires repetitively
* to notify of valid state
* @param {Ext.form.FormPanel}
* this
* @param {Boolean}
* valid 如果客户端验证都通过的话传入一个true true if the
* form has passed client-side validation
*/
'clientvalidation');
this.relayEvents(this.form, ['beforeaction', 'actionfailed',
'actioncomplete']);
},
//
createForm : function() {
delete this.initialConfig.listeners;
return new Ext.form.BasicForm(null, this.initialConfig);
},
getForm : function() {
return this.form;
},
isField : function(c) {
return !!c.setValue !!c.getValue !!c.markInvalid
!!c.clearInvalid;
},
submit : function(options) {
return this.form.submit(options);
},
loadRecord : function(record) {
this.record = record;
return this.form.loadRecord(record);
},
initFields : function() {
var f = this.form;
var windowForm = this;
var fn = function(c) {
if (windowForm.isField(c)) {
f.add(c);
}
if (c.isFieldWrap) {
Ext.applyIf(c, {
labelAlign : c.ownerCt.labelAlign,
labelWidth : c.ownerCt.labelWidth,
itemCls : c.ownerCt.itemCls
});
f.add(c.field);
} else if (c.doLayout c != windowForm) {
Ext.applyIf(c, {
labelAlign : c.ownerCt.labelAlign,
labelWidth : c.ownerCt.labelWidth,
itemCls : c.ownerCt.itemCls
});
if (c.items) {
for (var index = 0; index c.items.length; index++) {
fn.call(this, c.items[index]);
}
}
}
};
this.items.each(fn, this);
},
onReset : function() {
if (this.record) {
this.loadRecord(this.record);
} else {
this.form.reset();
}
},
// private
onRender : function(ct, position) {
this.initFields();
Ext.ux.WindowForm.superclass.onRender.call(this, ct, position);
this.form.initEl(this.body);
if (this.record) {
this.loadRecord(this.record);
}
}
});
上面是自定义的控件,下面是如何使用这个控件的方法:
//首先当然是创建这个Window
var testwindow = new Ext.ux.WindowForm({});
//修改
var categoryModCategory = new Ext.Action({
text : syscommon.updatebtn,
handler : function() {
var sm = grid.getSelectionModel();//选择表格的一条记录
if (sm.getSelected()) {
testwindow.loadRecord(sm.getSelected());//把选择记录赋值给Window
testwindow.show();//显示window
} else {
msgwarn(syscommon.pleaseselect);
}
}
});
//新增
var categoryAddAction = new Ext.Action({
text : syscommon.createbtn,
handler : function() {
//要根据实际情况，创建一个空记录
var nullrecord = new Ext.data.Record({
catname : '',
cattype : 1
});
testwindow.loadRecord(nullrecord);//把空记录赋值给Window，这样每次添加都会是空
}
});
1 楼 yepingping 2011-11-09
使用了这个扩展，form的数据怎么提交到后台啊，url怎么设置，我测试了下，好像不行提交。
2 楼 lyndon.lin 2011-11-17
和formpanel使用提交方式一样。
浙公网安备 33021202002483