switching themes dynamically causes layout issue

[awush]

I have an issue where switching CSS files for the ExtJS theme does not update the layout of ExtJS items that had been rendered to the page before the switch. Using ExtJS 4.0.7, I'm calling the following method to switch themes:


function changeTheme(theme) {
if (!theme) { return; }

userDefaults.theme = theme;
Ext.util.CSS.swapStyleSheet("theme", ThemeConstants.CSS_EXT_BASE_URL + theme + ".css");
setTimeout("updateLayout()", 500);
}


function updateLayout() {

var viewPort = Ext.getCmp("viewport");
viewPort.doLayout();

}

earlier, I'd created the viewport as follows:


var header = Ext.create("Ext.panel.Panel", {
contentEl: "header",
border: false,
height: $("#header").height(),
style: "z-index: 100",
region: "north"
});


// create the tab panel
tabMenu = Ext.create("Ext.tab.Panel", {
border: false,
region: "center"
});


// add the search page
tabMenu.add(buildSearchTab());


// register the tab change event
tabMenu.on("tabchange", tabChanged);


Ext.create("Ext.container.Viewport", {
id: "viewport",
layout: "border",
defaults: { border: false },
items: [header, tabMenu]
});

When I change themes to a theme that has a different font-size or tab-size, the tabs appear broken immediately after the change. It's not until I resize the entire browser window that the layout appears to work.

I've also tried the methods
forceComponentLayout() and
doComponentLayout() as well as
viewPort.cascade(function () {
if (typeof this.doLayout == "function") {
this.doLayout();
}
});.

None of these have produced any result. The tabs remain broken until the entire browser window is resized.

screenshots:

before theme change:
29807

immediately after theme change:
29808


immediately after window resize:
29809

[mitchellsimoens]

Have you tried deferring the layout call a little after the stylesheet has been applied?

[awush]

yes, that's what the line


setTimeout("updateLayout()", 500); in the changeTheme function does. I've tried setting it as high as 5 seconds (5000), but to no avail.

[awush]

an update to this:

it appears that making a call to:


tabMenu.forceComponentLayout(); in the
function updateLayout() function works, but only after a results tab has been created. any call to the tab panel's forceComponentLayout() function before a results tab is visible seems to do nothing.

Still looking for a robust work-around that doesn't require me to create a new tab before the tab's layout can be refreshed.

[awush]

I have found a solution to this problem, but boy is it kludgy.


function updateLayout() {
tabMenu.add({ id: "tempTab" });
tabMenu.remove("tempTab");
tabMenu.forceComponentLayout();
}

by adding and quickly removing a temporary tab to the tab panel, the forceComponentLayout seems to correctly function every time it's run. I can't help but to think this is a problem with the layout either in the tab panel itself, or in the viewport with a border layout, since this didn't start showing up until I introduced a viewport.