EXT 自定义组件

Question

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

....
,{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}]
}
]}..............

Answer 1

很简单的。。。

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

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