[3.1.1]Ext.ux.ThemeChoserPanel

[tobiu]

hi together,

as posted in the fieldmanager-topic (see signature), i created a panel to chose between different extthemes in realtime. i polished the code a bit further to release it as an ux.

here is a demo-video on youtube:
http://www.youtube.com/watch?v=Zkr7hriBl3U

to use it, it is important to include an id to the xtheme:



<link rel="stylesheet" type="text/css" href="../ext-3.1.1/resources/css/ext-all-notheme.css">
<link rel="stylesheet" type="text/css" href="../ext-3.1.1/resources/css/xtheme-blue.css" id="theme">


it is designed to show thumbs sized 200 * 300 pixels.
if you prefer other sizes, you need to change the positioning of the containers as well.
if needed, i can post my thumbs of the fieldmanager app, but i recommend to make own screens of your app ;)

i put in some default themes and selfmade ones. just put in the themes you like / want to use and remove the others.

here is the code:



/*
* @author: Tobias Uhlig
* @contact: uhlig@extthemes.com
* @license: GPL v3
*
* requires Ext.ux.Spotlight from the Ext.examples folder
*/

Ext.ns('Ext.ux');

Ext.ux.ThemeChoserPanel= Ext.extend(Ext.Panel, {
autoScroll : true
,iconCls : 'color_wheel' // silk icons -> famfamfam
,layout : 'absolute'
,ref : 'designChoserPanel'
,title : 'Chose Design'

,initComponent : function(){

var spot = new Ext.ux.Spotlight({
easing : 'easeOut'
,duration : .15
});

Ext.apply(this, {
defaults : {
bodyStyle : {
height : 200
,width : 300
}
,style : {
cursor : 'pointer'
}
,listeners: {
afterrender: function(p) {
p.el.on({
click : function(){
Ext.util.CSS.swapStyleSheet('theme', '../ext-3.1.1/resources/css/' + p.id + '.css');
}
,mouseenter : function(){
spot.show(this);
}
,mouseleave : function(){
spot.hide(this);
}
});
}
}
}
,items : this.buildThumbs().concat(this.items || [])
});

Ext.ux.DesignChoserPanel.superclass.initComponent.call(this);
}
,buildThumbs : function(){
return [{
html : '<img src="../images/adminThemes/ts_blue.jpg">'
,id : 'xtheme-blue'
,title : 'Ext Blue Theme'
,x : 20
,y : 20
},{
html : '<img src="../images/adminThemes/ts_cpd.jpg">'
,id : 'xtheme-champagneDark'
,title : 'Champagne Dark Theme'
,x : 344
,y : 20
},{
html : '<img id="ts_cpl" src="../images/adminThemes/ts_cpl.jpg">'
,id : 'xtheme-champagneLight'
,title : 'Champagne Light Theme'
,x : 668
,y : 20
},{ // row 2
html : '<img src="../images/adminThemes/ts_gray.jpg">'
,id : 'xtheme-gray'
,title : 'Gray Theme'
,x : 20
,y : 267
},{
html : '<img src="../images/adminThemes/ts_redwine.jpg">'
,id : 'xtheme-redWine'
,title : 'Red Wine Theme'
,x : 344
,y : 267
},{
html : '<img src="../images/adminThemes/ts_silvercherry.jpg">'
,id : 'xtheme-silverCherry'
,title : 'Silver Cherry Theme'
,x : 668
,y : 267
},{ // row 3
html : '<img src="../images/adminThemes/ts_silvercherry.jpg">'
,id : 'xtheme-access'
,title : 'Access Theme'
,x : 20
,y : 514
}];
}
});

Ext.reg('themeChoserPanel', Ext.ux.ThemeChoserPanel);



kind regards,
tobiu

[tobiu]

ah, finally it's online (got stuck on the vBulletin spam-filter).
i beautified the ux a little bit more.

feedback appreciated ;)


kind regards,
tobiu

[tobiu]

for migrating this to ext 3.2-beta, you need to change a part of the defaults:

old:


bodyStyle : {
height : 200
,width : 300
}


new:


height : 227
,width : 302


important: don't just change the numbers, you need to remove bodyStyle.

details under:
http://www.extjs.com/forum/showthread.php?t=94628


kind regards,
tobiu