同一项目在多个选项卡中的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' 
}); 

别名属性是类名的别名（在这种情况下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：假的吧

您可以通过创建自定义标签类在这里获得最大的代码重用，像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消失了？）。

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

祝你好运！