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

时间:2015-01-19 15:46:36

标签: java javascript extjs scripting extjs4.2

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

1 个答案:

答案 0 :(得分:4)

我认为你必须为每个unique id设置xtype,它应该如下所示。对于这两个我已将id更改为settlementInstitution1&&分别为settlementInstitution2

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