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：假冒

通过创建自定义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：手动控制

这可能是hacky，但比选项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可能会消失？）。

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

祝你好运！

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

2 个答案: