Using the same element on multiple tabs in extjs

Question

how to reuse the same element on several tabs so that when this element changes, another tab reflects the changes

I try this code, but the label on the first tab is 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'); } }] }] }); }); 

Sorry, I mean using the label globally (e.g. a global variable) so that the same instance of the label can display and change from each tab

Answer 1

you can define your shortcut component:

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

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

this way you can reuse a component like

 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

You cannot do exactly what you want here. You see, when you create a label, it has a basic DOM, and, of course, the DOM can exist in only one place (therefore, it cannot show the same thing on both tabs).

If there is a component that you want to display on both tabs, it seems that it is “higher” from the hierarchical data point. Perhaps it belongs outside the tab bar?

If the label really belongs in both tabs and should be “the same”, you either need to fake it, or manually move it between the tabs.

Option 1: Fake

You can get the most code reuse by creating your own Label class, such as laurac. You still need to keep the label text in sync, so you will need to update it when another text changes:

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

It is clear that he does not feel "clean."

Option 2: Manual Control

This can be hacked, but slightly less hacked than option 1. The main idea is to move the label between the two tabs when they are activated:

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

Note. I haven't started using Ext4 yet, so some of the code I added may need to be changed for Ext4 (I think maybe doLayout gone?).

In any case, these are the only two ways that I can solve to solve your problem.

Good luck