PDA

View Full Version : [FIXED] Binding Tab Title Works Only For Active Tabs



ibnesayeed
3 Jun 2014, 6:05 PM
In ExtJS 5.0.0.970 If the tab titles are bound with a ViewModel data, they do not populate until the tab is activated. This was not the case in the beta release though. Here is a fiddle that illustrates the issue.

https://fiddle.sencha.com/#fiddle/6b2

The code below has three tabs in a tab panel. First and second tabs are bound with a ViewModel data, while the third tab has static property values. Title of the first tab is rendered because it is active, second one does not render until the tab is clicked, while the third tab renders fine.


Ext.create('Ext.tab.Panel', {
renderTo: Ext.getBody(),
items: [{
viewModel: {
data: {
title: 'First Tab',
html: 'First tab content'
}
},
bind: {
title: '{title}',
html: '{html}'
}
}, {
viewModel: {
data: {
title: 'Second Tab',
html: 'Second tab content'
}
},
bind: {
title: '{title}',
html: '{html}'
}
}, {
title: 'Third Tab',
html: 'Third tab content'
}]
});

mitchellsimoens
4 Jun 2014, 4:31 AM
Thanks for the report! I have opened a bug in our bug tracker.

Phil Guerrant
4 Jun 2014, 4:45 AM
Issue is fixed. Here's an override to get you by for now:




Ext.define('EXTJS-13711', {
override: 'Ext.panel.Panel',

setTitle: function(title) {
var me = this,
oldTitle = me.title,
header = me.header,
reExpander = me.reExpander,
placeholder = me.placeholder;

if (title !== oldTitle) {
me.title = title;

if (header) {
if (header.isHeader) {
header.setTitle(title);
}
} else if (me.rendered) {
me.updateHeader();
}

if (reExpander) {
reExpander.setTitle(title);
}

if (placeholder && placeholder.setTitle) {
placeholder.setTitle(title);
}

me.fireEvent('titlechange', me, title, oldTitle);
}
}
});

ibnesayeed
4 Jun 2014, 5:22 AM
Thanks for the prompt action. Thanks for providing the override too. :)

ibnesayeed
14 Jun 2014, 6:11 PM
Issue is fixed. Here's an override to get you by for now:




Ext.define('EXTJS-13711', {
override: 'Ext.panel.Panel',

setTitle: function(title) {
var me = this,
oldTitle = me.title,
header = me.header,
reExpander = me.reExpander,
placeholder = me.placeholder;

if (title !== oldTitle) {
me.title = title;

if (header) {
if (header.isHeader) {
header.setTitle(title);
}
} else if (me.rendered) {
me.updateHeader();
}

if (reExpander) {
reExpander.setTitle(title);
}

if (placeholder && placeholder.setTitle) {
placeholder.setTitle(title);
}

me.fireEvent('titlechange', me, title, oldTitle);
}
}
});


While we are here, may I ask, what are the recommended convention and steps needed to manage overrides? Is there a guide available on this topic? :)