Question

我正在使用框架ExtJS 3.3.1管理软件。我的问题是我想根据调用者使用组件。我有一个region中的一个tabpanel，我想使用此伪代码：

items: [{
    region: 'center',
    title: 'List of Transmissions',

    // PSEUDO CODE START
    IF (RECEIVE A CALLER BY THIS COMPONENT) {
        id: 'idTab1'
        xtype: 'typeA'
    }
    ELSE IF(RECEIVE A CALLER BY THIS COMPONENT) {
        id: 'idTab2'
        xtype: 'typeB'
    }
    // PSEUDO CODE END
}]

有人可以帮我翻译成ExtJS 3.3.1吗？

谢谢

Answer 1

您可以将绑定函数用于具有调用者变量的隐藏/显示typeA和typeB。

您可以使用afterrender或boxready侦听器在加载父面板后创建cmp。

我无法创建小提琴，因为我还没有论坛sencha帐户，但是您可以在此https://fiddle.sencha.com/上尝试使用此代码：

var callerVar = false;

new Ext.Panel({
    renderTo: document.body,
    items: [
        {
            xtype: 'panel',
            html: 'firstPanel',
            hidden: callerVar
        },
        {
            xtype: 'panel',
            html: 'scndPanel',
            hidden: !callerVar
        }
    ]
});

您要决定如何更新callerVar，我不希望这样做。

Answer 2

感谢Enzo BLACHON和他的想法。我正在尝试使用layout:'card'解决并添加/删除ID。根据我的说法，即使它解决了我的问题，也太复杂了，我想问一下是否有一种方式可以使复杂度降低，并且更有用：

id: 'flip_ID',
region: 'center',
layout: 'card',
activeItem: 0,
items: [
   {
     itemId: 'idTab1',
     xtype: 'typeA'
   },
   {
     itemId: 'idTab2',
     xtype: 'typeB'
   }]

在调用第一个组件时，我添加了以下代码：

var center = Ext.getCmp('flip_ID');
center.add(Ext.ComponentMgr.create({
       itemId: 'idTab1',
       xtype: 'typeA'
}));
center.getLayout().setActiveItem('idTab1');
center.remove('idTab2', true);

当调用第二个组件时，我添加了以下代码：

 var center = Ext.getCmp('flip_ID');
    center.add(Ext.ComponentMgr.create({
           itemId: 'idTab2',
           xtype: 'typeB'
    }));
    center.getLayout().setActiveItem('idTab2');
    center.remove('idTab1', true);

ExtJS是否可以在同一组件内使用IF语句

2 个答案: