PDA

View Full Version : Apply Theme onfly



denkoo
14 Feb 2008, 9:27 AM
to change your theme onfly

Add this include with good path after download all theme on http://extjs.com/learn/Ext_Extensions
[PHP]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>yourTitle</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<link title="aero" rel="stylesheet" type="text/css" href="../resources/css/xtheme-aero.css" media="screen">
<link title="black" rel="alternate stylesheet" type="text/css" href="../resources/css/xtheme-black.css" media="screen">
<link title="darkgray" rel="alternate stylesheet" type="text/css" href="../resources/css/xtheme-darkgray.css" media="screen">
<link title="gray" rel="alternate stylesheet" type="text/css" href="../resources/css/xtheme-gray.css" media="screen">
<link title="olive" rel="alternate stylesheet" type="text/css" href="../resources/css/xtheme-olive.css" media="screen">
<link title="purple" rel="alternate stylesheet" type="text/css" href="../resources/css/xtheme-purple.css" media="screen">
<link title="slate" rel="alternate stylesheet" type="text/css" href="../resources/css/xtheme-slate.css" media="screen">


<script type="text/javascript" src="../_ressources/ux/cookies.js"></script>
<script language="javascript">
Ext.starter = function(){
var msgCt;
function createBox(t, s){
return ['<div class="msg">',
'<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
'<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
'</div>'].join('');
}
return {
msg : function(title, format){
if(!msgCt){
msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
}
msgCt.alignTo(document, 't-t');
var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
m.slideIn('t').pause(1).ghost("t", {remove:true});
},
setActiveStyleSheet: function (title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
},
init : function(){
Ext.QuickTips.init();
var t = Ext.get('exttheme');

var theme = Ext.cookies.get('exttheme') || 'aero';

if(theme){
if(t) t.dom.value = theme;
this.setActiveStyleSheet(theme);
Ext.getBody().addClass('x-'+theme);
}
if(t) {
t.on('change', function(){
Ext.cookies.set('exttheme', t.getValue());
Ext.starter.setActiveStyleSheet(t.getValue());
//setTimeout(function(){
// window.location.reload();
//}, 250);
});
}
var lb = Ext.get('lib-bar');
if(lb){
lb.show();
}
}
};
}();
Ext.onReady(Ext.starter.init, Ext.starter);
</script>
</head>
<body>
<div id="theme">Theme
<select id="exttheme">
<option value="aero">Bleu [D

DigitalSkyline
14 Feb 2008, 9:47 AM
Hmm, thanks for sharing, but there really are much better existing solutions...
see: http://extjs.com/forum/showthread.php?t=25564&highlight=change+theme
http://extjs.com/forum/showthread.php?t=19616&highlight=change+theme

denkoo
14 Feb 2008, 9:59 AM
verry much )).. thanks )

galdaka
14 Feb 2008, 10:09 AM
More complicated!!

use: Ext.util.CSS.swapStyleSheet

view demo in: www.galdaka.es

greetings,