awush
5 Dec 2011, 12:23 PM
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
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