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

Question

May be my ques is basic thing in Extjs 4.2 I need to use same xtype (which is a view) to be re-used multiple time in same page. My part of code

this panel where i need to call the xtype multiple times.

{
                    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',
                        }

This is the xtype (Same view to be used multiple times)

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

I think you just have to have unique id for each xtype ,It should work like below.For these two i have changed id to settlementInstitution1 && settlementInstitution2 respectively.

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