在 extjs 的多个选项卡中使用相同的项目

Question

如何在多个选项卡中重用同一项目，以便当该项目更改时，其他选项卡将反映

我尝试此代码的更改，但第一个选项卡中的标签未显示：

var label = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});

Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),
    items : [{
        title : 'tab1',
        items : [label, {
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab1');
            }
        }]
    }, {
        title : 'tab2',
        items : [label, {
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab2');
            }
        }]
    }]
});
});

抱歉，我的意思是全局使用该标签（像全局变量），以便可以从每个选项卡显示和更改相同的标签实例

Answer 1

您可以定义标签组件：

Ext.define('MyLabel', {
   extend: 'Ext.form.Label',
   alias: 'widget.mylabel',
   text : 'mylabel'
});

alias 属性是类名（在本例中为 MyLabel）的别名，这就是为什么您可以使用“mylabel”作为 xtype，

这样您就可以重用该组件，如下所示

var panel = Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),

    items : [{
       title : 'tab1',             
       items : [{
           xtype: 'mylabel',
           itemId: 'item1'
       }, {
          xtype : 'button',                   
          handler : function(button) {
             panel.down('#item2').setText('changed from tab1');
       }
     }]
     }, {
       title : 'tab2',             
       items : [{
          xtype: 'mylabel',
          itemId: 'item2'              
       }, {
          xtype : 'button',
          handler : function(button) {
             panel.down('#item1').setText('changed from tab2');
         }
     }]

});

Answer 2

你不能在这里完全做你想做的事。您会看到，当您创建标签时，它具有底层 DOM，并且自然 DOM 只能存在于一个位置（因此它不能在两个选项卡上显示相同的内容）。

如果您希望在两个选项卡上显示某个组件，那么从数据层次结构的角度来看，它似乎位于“更高层”。也许它属于选项卡面板之外？

如果标签确实属于两个选项卡并且应该“相同”，那么您要么需要伪造它，要么在选项卡之间手动移动它。

选项 1：Fake It

您可以通过创建自定义 Label 类（如 laurac 发布的那样）在此处获得最大程度的代码重用。您仍然需要保持标签文本同步，因此当另一个标签文本发生更改时，您将需要更新一个标签文本：

var label1 = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});
var label2 = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});

Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),
    items : [{
        title : 'tab1',
        items : [label1, {
            xtype : 'button',
            handler : function() {
                label1.setText('changed from tab1');
                label2.setText('changed from tab1');
            }
        }]
    }, {
        title : 'tab2',
        items : [label2, {
            xtype : 'button',
            handler : function() {
                labe2.setText('changed from tab2');
                labe1.setText('changed from tab2');
            }
        }]
    }]
});
});

显然，这感觉不太“干净”。

选项 2：手动控制

这可能有点老套，但比选项 1 稍微简单一些。基本想法是在激活两个选项卡时将标签在它们之间移动：

var label = Ext.create('Ext.form.Label', {
    text : 'mylabel'
});

Ext.onReady(function() {
Ext.create('Ext.tab.Panel', {
    width : 200,
    height : 200,
    renderTo : Ext.getBody(),
    items : [{
        title : 'tab1',
        items : [{
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab1');
            }
        }],
        listeners: {
            scope: this,
            activate: function(panel) {
                panel.insert(0, label);
                panel.doLayout();
            }
        }
    }, {
        title : 'tab2',
        items : [{
            xtype : 'button',
            handler : function() {
                label.setText('changed from tab2');
            }
        }],
        listeners: {
            scope: this,
            activate: function(panel) {
                panel.insert(0, label);
                panel.doLayout();
            }
        }
    }]
});
});

注意：我还没有开始使用 Ext4然而，所以我添加的一些代码可能需要针对 Ext4 进行更改（我想也许 doLayout 消失了？）。

无论如何，这是我能想到的解决你的问题的唯一两种方法。

祝你好运！