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，这样每次添加都会是空

}

});

 

 

评论

2 楼 lyndon.lin 2011-11-17  

和formpanel使用提交方式一样。

1 楼 yepingping 2011-11-09  

使用了这个扩展，form的数据怎么提交到后台啊，url怎么设置，我测试了下，好像不行提交。