ExtJs自定义带Form效能的Window

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();}},// privateonRender : 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);} } });

?

?

上面是自定义的控件,下面是如何使用这个控件的方法：

?

//首先当然是创建这个Windowvar 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());//把选择记录赋值给Windowtestwindow.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使用提交方式一样。