Load APEX-AT-WORK Examples...

Version:
1.5.0

Last update:
06.08.2009

Creator:
Tobias Arnhold

Email:
Tobias Arnhold (tobias-arnhold@hotmail.de)

Blog:
APEX at Work (http://apex-at-work.blogspot.com/)

Visitors:

Username:
APEX_PUBLIC_USER
ExtJS theme switcher for APEX     
   
   
How to integrate an theme switcher     
  1. Update your page template
Add id="theme" to the theme css:
<link rel="stylesheet" type="text/css" href="/i/themes/ext-2.0.2/resources/css/xtheme-slate.css" />
that it looks like:
<link rel="stylesheet" id="theme" type="text/css" href="/i/themes/ext-2.0.2/resources/css/xtheme-slate.css" />

2. Add theme switcher item
Add a new region to your page 0.
Add a new "Select List" item P0_EXT_THEME in this region.
In "HTML Form Element Attributes" add: onchange="fnc_setExtTheme()"
In "List of values definition" add that:
STATIC2:xtheme-slate;/i/themes/ext-2.0.2/resources/css/xtheme-slate.css,
xtheme-gray;/i/themes/ext-2.0.2/resources/css/xtheme-gray.css,
xtheme-gray-extend;/i/themes/ext-2.0.2/resources/css/xtheme-gray-extend.css,
xtheme-darkgray;/i/themes/ext-2.0.2/resources/css/xtheme-darkgray.css,
xtheme-chocolate;/i/themes/ext-2.0.2/resources/css/xtheme-chocolate.css,
xtheme-green;/i/themes/ext-2.0.2/resources/css/xtheme-green.css,
xtheme-midnight;/i/themes/ext-2.0.2/resources/css/xtheme-midnight.css,
xtheme-black;/i/themes/ext-2.0.2/resources/css/xtheme-black.css,
xtheme-olive;/i/themes/ext-2.0.2/resources/css/xtheme-olive.css,
xtheme-indigo.css;/i/themes/ext-2.0.2/resources/css/xtheme-indigo.css,
xtheme-silverCherry.css;/i/themes/ext-2.0.2/resources/css/xtheme-silverCherry.css,
xtheme-slickness.css;/i/themes/ext-2.0.2/resources/css/xtheme-slickness.css

3. Add a javascript file to your app with the following code:
/*
* Source:
* Copyright(c) 2009, Tobias Arnhold
*
* This code is licensed under BSD license. Use it as you wish,
* but keep this copyright intact.
*/

// ----------------------------------------------------------------------------- //
// Set ext theme //
// ----------------------------------------------------------------------------- //
function fnc_setExtTheme() {
var v_theme = $x("P0_EXT_THEME").value;
Ext.util.CSS.swapStyleSheet('theme', v_theme);
}

For more details look in my source files:
ExtJS page template
Javascript file

 
   
Sources