如何在同一个面板 Extjs 4.2 中多次使用相同的 xtype？答案

【问题标题】：How can i use same xtype multiple time within same panel Extjs 4.2?如何在同一个面板 Extjs 4.2 中多次使用相同的 xtype？
【发布时间】：2015-03-17 16:21:03
【问题描述】：

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

【问题讨论】：

标签： java javascript extjs scripting extjs4.2

【解决方案1】：

我认为你只需要为每个xtype 拥有unique id，它应该像下面这样工作。对于这两个我已将 id 分别更改为settlementInstitution1 && settlementInstitution2。

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

【讨论】：