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，那么为通知验证的状态（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，这样每次添加都会是空
}
});