EXT 自定义组件

我在系统中要多处用到这个支付的操作,想弄成一个组件,方便调用,请问应该如何弄呢?

....
,{layout : 'column',
border : false,
items : [{
columnWidth : .25,

layout : 'form',
labelWidth : 65,

defaultType : 'textfield',
border : false,
items : [{fieldLabel :'银行名称',name:'bankName',id:'bankName',allowBlank:true,anchor:'99%',xtype : 'textfield',readOnly:true,hidden:true}
,{fieldLabel :'银行名称',name:'bankName1',id:'bankName1',allowBlank:true,anchor:'99%',xtype : 'textfield',readOnly:true,hidden:true}]
},{
columnWidth : .25,

layout : 'form',
labelWidth : 65,

defaultType : 'textfield',
border : false,
items : [{fieldLabel :'收款帐户',name:'receivableAccounts',id:'receivableAccounts',allowBlank:true,anchor:'98%',xtype : 'textfield',cls:'changInput',readOnly:true,hidden:true}
,{fieldLabel :'付款帐户',name:'paymentAccount',id:'paymentAccount',allowBlank:true,anchor:'98%',xtype : 'textfield',cls:'changInput',readOnly:true,hidden:true}]
},{
columnWidth : .25,

layout : 'form',
labelWidth : 65,

defaultType : 'textfield',
border : false,
items : [{fieldLabel :'收款人',name:'receivablePersonName',id:'receivablePersonName',allowBlank:true,anchor:'98%',xtype : 'textfield',readOnly:true,hidden:true}
,{fieldLabel :'付款人',name:'paymentPersonName',id:'paymentPersonName',allowBlank:true,anchor:'98%',xtype : 'textfield',readOnly:true,hidden:true}]
},{
columnWidth : .25,

layout : 'form',
labelWidth : 65,

defaultType : 'textfield',
border : false,
items : [{fieldLabel :'开户银行',name:'openBankName',id:'openBankName',allowBlank:true,anchor:'98%',xtype : 'textfield',readOnly:true,hidden:true}
,{fieldLabel :'开户银行',name:'openBankName1',id:'openBankName1',allowBlank:true,anchor:'98%',xtype : 'textfield',readOnly:true,hidden:true}]
}]},{
layout : 'column',
border : false,
items : [{
columnWidth : .50,

layout : 'form',
labelWidth : 65,

defaultType : 'textfield',
border : false,
items : [{fieldLabel :'收款人',name:'collectionName',id:'collectionName',allowBlank:true,anchor:'99%',xtype : 'textfield',hidden:true}]
},{
columnWidth : .50,

layout : 'form',
labelWidth : 65,

defaultType : 'textfield',
border : false,
items : [{fieldLabel :'付款人',name:'paymentName',id:'paymentName',allowBlank:true,anchor:'98%',xtype : 'textfield',hidden:true}]
}
]}..............

很简单的。。。

我们项目都是这样干的，在Sencha Architect工具设计组件（自定义的）
然后将组件加到我们想要的页面上就行

这个工具是可视化的，所以操作起来确实很方面

可以看看这个 http://blog.csdn.net/tqwwilliam/article/details/7168058

楼主用的是哪个Ext版本？
如果是4.0以上的版本建议看看API的Ext.util.Observable，可能对你有帮助。
建议楼主在开发时将业务逻辑和Event分开，这样更有益于减轻代码的耦合。

很简单的

用Sencha Architect工具很轻松就能做到你想要的效果

http://www.sencha.com/learn/reusable-and-customizable-components-in-ext-designer/

给你个链接自己看看

这个完全是你想要的