using same item in multiple tab in extjs - extjs

Question

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

Answer 1

you can define your label 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 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');
}
}]
});

Answer 2

You can't do exactly what you want here. You see, when you create a label, it has underlying DOM, and naturally that DOM can only exist in one place (so it can't show the same thing on both tabs).
If there is a component that you are wanting to show on both tabs, it seems like it is "higher up" from a data hierarchical perspective. Perhaps it belongs outside the tab panel?
If the label truly belongs in both tabs and should be "the same", you are either going to need to fake it or manually move it between the tabs.
Option 1: Fake It
You can get the most code reuse here by creating a custom Label class, like laurac posted. You still need to keep the label text in sync, so you are going to need to update one when the other's text is changed:
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');
}
}]
}]
});
});
Clearly that doesn't feel to "clean".
Option 2: Manual Control
This might be hacky, but slightly less hacky than option 1. Basic idea is to move the label between to 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 might need to be changed for Ext4 (I think maybe doLayout went away?).
Anyway, those are the only two ways I can think of to solve your problem.
Good luck!