可能是我的问题是Extjs 4.2中的基本内容我需要使用相同的xtype(这是一个视图)在同一页面中多次重复使用。我的代码部分
此面板我需要多次调用xtype。
{
xtype : 'panel',
title : 'Payment Received at this Nostro Account',
flex : 2,
layout : {
type : 'anchor'
},
items : [
{
xtype: 'label',
forId: 'pymntRcvdNostroIntermediary',
text: 'Intermediary',
margins: '0 0 0 10'
},
{
xtype : 'settlementInstitution',
id : 'settlementInstitution',
cls : 'settlementInstitution',
},
{
xtype: 'label',
forId: 'pymntRcvdNostroBenBank',
text: 'Benificiary Bank',
margins: '0 0 0 60'
},
{
xtype : 'settlementInstitution',
id : 'settlementInstitution',
cls : 'settlementInstitution',
},
{
xtype: 'label',
forId: 'pymntRcvdNostroBen',
text: 'Benificiary',
margins: '0 0 0 120'
},
{
xtype : 'settlementInstitution',
id : 'settlementInstitution',
cls : 'settlementInstitution',
}
这是xtype(多次使用的相同视图)
Ext.define('settlementInstitution', {
extend: 'Ext.panel.Panel',
height:'100%',
width: '100%',
//style: 'border: solid #FFFFFF 1px',
alias: 'widget.settlementInstitution',
items : [{
xtype : 'radiogroup',
id : 'radioPymtSentNostroOption',
fieldLabel : '',
flex: 1,
columns : 2,
columnWidth : 2,
vertical : true,
items : [
{
boxLabel : 'A',
name : 'radioPymtSentNostroChoice',
inputValue : 'A',
id : 'radioPymtSentNostroA'
},
{
boxLabel : 'D',
name : 'radioPymtSentNostroChoice',
inputValue : 'A',
id : 'radioPymtSentNostroD'
}
],
listeners : {
change : function(field, newValue, oldValue) {
var choice = newValue.radioPymtSentNostroOption;
if (Ext.isArray(choice)) {
return;
}
if (choice == "A") {
Ext.getCmp('pymtSentNostroPartyId').setVisble(true);
Ext.getCmp('pymtSentNostroBic').setVisble(true);
Ext.getCmp('pymtSentNostroName').setVisble(false);
Ext.getCmp('pymtSentNostroAddress1').setVisble(false);
Ext.getCmp('pymtSentNostroAddress2').setVisble(false);
Ext.getCmp('pymtSentNostroAddress3').setVisble(false);
}
if (choice == "D") {
Ext.getCmp('pymtSentNostroPartyId').setVisble(false);
Ext.getCmp('pymtSentNostroBic').setVisble(false);
Ext.getCmp('pymtSentNostroName').setVisble(true);
Ext.getCmp('pymtSentNostroAddress1').setVisble(true);
Ext.getCmp('pymtSentNostroAddress2').setVisble(true);
Ext.getCmp('pymtSentNostroAddress3').setVisble(true);
}
}
}
},
{
name : 'pymtSentNostroPartyId',
xtype : 'textfield',
fieldLabel : 'Party Id',
labelSeparator : '',
margin : '15 0 10 3',
maxLength : 20,
enableKeyEvents:true,
id : 'pymtSentNostroPartyId',
enforceMaxLength : 20,
},
{
name : 'pymtSentNostroBic',
xtype : 'textfield',
fieldLabel : 'BIC',
labelSeparator : '',
margin : '15 0 10 3',
maxLength : 10,
enableKeyEvents:true,
id : 'pymtSentNostroBic',
enforceMaxLength : 10,
},
{
name : 'pymtSentNostroName',
xtype : 'textfield',
fieldLabel : 'Name',
labelSeparator : '',
margin : '15 0 10 3',
maxLength : 10,
enableKeyEvents:true,
id : 'pymtSentNostroName',
enforceMaxLength : 10,
},
{
name : 'pymtSentNostroAddress1',
xtype : 'textfield',
fieldLabel : 'Address',
labelSeparator : '',
margin : '15 0 10 3',
maxLength : 30,
enableKeyEvents:true,
id : 'pymtSentNostroAddress1',
enforceMaxLength : 30,
},
{
name : 'pymtSentNostroAddress2',
xtype : 'textfield',
labelSeparator : '',
margin : '15 0 10 3',
maxLength : 30,
enableKeyEvents:true,
id : 'pymtSentNostroAddress2',
enforceMaxLength : 30,
},
{
name : 'pymtSentNostroAddress3',
xtype : 'textfield',
labelSeparator : '',
margin : '15 0 10 3',
maxLength : 30,
enableKeyEvents:true,
id : 'pymtSentNostroAddress3',
enforceMaxLength : 30,
}
]
});
答案 0 :(得分:4)
我认为你必须为每个unique id
设置xtype
,它应该如下所示。对于这两个我已将id更改为settlementInstitution1
&&分别为settlementInstitution2
。
{
xtype : 'settlementInstitution',
id : 'settlementInstitution1',
cls : 'settlementInstitution',
},
{
xtype : 'settlementInstitution',
id : 'settlementInstitution2',
cls : 'settlementInstitution',
},