如何在同一面板Extjs 4.2中多次使用同一xtype？

Question

可能是我的問題是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,
        }
    ]
});

Answer 1

我認為你必須有unique id為每個xtype ，它應該像below.For這兩個我已經改變ID來settlementInstitution1 && settlementInstitution2分別。

                        {
                            xtype : 'settlementInstitution',
                            id : 'settlementInstitution1',
                            cls : 'settlementInstitution',
                        },
                        {
                            xtype : 'settlementInstitution',
                            id : 'settlementInstitution2',
                            cls : 'settlementInstitution',
                        },