在extj中的多个选项卡中使用相同的项目 [英] using same item in multiple tab in extjs

问题描述

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

how to reuse the same item in multiple tab so that when that item change, other tab will reflect the changes

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

i try this code but the label in first tab not shown:

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');
            }
        }]
    }]
});
});

我很抱歉，我的意思是使用全局标签（如全局变量），以便

i'm sorry, what i mean is to use the label globally(like global variable) so that the same instance of label can be displayed and changed from every tab

推荐答案

可以定义标签组件：

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

别名属性是类名称的一个别名（在这种情况下是MyLabel），这就是为什么你可以使用mylabel作为xtype

the alias property is an alias for the class name (in this case MyLabel) and that is why you can use "mylabel" as an xtype

以这种方式可以重用该组件，像这样

in this way you can reuse the component, like this

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');
         }
     }]

});

这篇关于在extj中的多个选项卡中使用相同的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！