PDA

View Full Version : Ext.ux.ThemeCombo - w/o page reload and keeping state



jsakalos
6 Feb 2008, 3:28 PM
Hi all!

Here is code of theme selector combo that doesn't reload page on theme change and that keeps state if the state management is available. You need to give id="theme" to your css link in the header:



<link href="/extjs-2.0/resources/css/xtheme-default.css" rel="stylesheet" type="text/css" id="theme">


// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.ThemeCombo - Combo pre-configured for themes selection
*
* @author Ing. Jozef Sakáloš <jsakalos@aariadne.com>
* @copyright (c) 2008, by Ing. Jozef Sakáloš
* @date 30. January 2008
* @version $Id: Ext.ux.ThemeCombo.js 472 2009-01-22 23:24:56Z jozo $
*
* @license Ext.ux.ThemeCombo is licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

Ext.ux.ThemeCombo = Ext.extend(Ext.form.ComboBox, {
// configurables
themeBlueText: 'Ext Blue Theme'
,themeGrayText: 'Gray Theme'
,themeBlackText: 'Black Theme'
,themeOliveText: 'Olive Theme'
,themePurpleText: 'Purple Theme'
,themeDarkGrayText: 'Dark Gray Theme'
,themeSlateText: 'Slate Theme'
,themeVistaText: 'Vista Theme'
,themePeppermintText: 'Peppermint Theme'
,themePinkText: 'Pink Theme'
,themeChocolateText: 'Chocolate Theme'
,themeGreenText: 'Green Theme'
,themeIndigoText: 'Indigo Theme'
,themeMidnightText: 'Midnight Theme'
,themeSilverCherryText: 'Silver Cherry Theme'
,themeSlicknessText: 'Slickness Theme'
,themeVar:'theme'
,selectThemeText: 'Select Theme'
,themeGrayExtndText:'Gray-Extended Theme'
,lazyRender:true
,lazyInit:true
,cssPath:'../ext/resources/css/' // mind the trailing slash

// {{{
,initComponent:function() {

Ext.apply(this, {
store: new Ext.data.SimpleStore({
fields: ['themeFile', {name:'themeName', type:'string'}]
,data: [
['xtheme-default.css', this.themeBlueText]
,['xtheme-gray.css', this.themeGrayText]
,['xtheme-darkgray.css', this.themeDarkGrayText]
,['xtheme-black.css', this.themeBlackText]
,['xtheme-olive.css', this.themeOliveText]
,['xtheme-purple.css', this.themePurpleText]
,['xtheme-slate.css', this.themeSlateText]
,['xtheme-peppermint.css', this.themePeppermintText]
,['xtheme-chocolate.css', this.themeChocolateText]
,['xtheme-green.css', this.themeGreenText]
,['xtheme-indigo.css', this.themeIndigoText]
,['xtheme-midnight.css', this.themeMidnightText]
,['xtheme-silverCherry.css', this.themeSilverCherryText]
,['xtheme-slickness.css', this.themeSlicknessText]
,['xtheme-gray-extend.css', this.themeGrayExtndText]
// ,['xtheme-pink.css', this.themePinkText]
]
})
,valueField: 'themeFile'
,displayField: 'themeName'
,triggerAction:'all'
,mode: 'local'
,forceSelection:true
,editable:false
,fieldLabel: this.selectThemeText
}); // end of apply

this.store.sort('themeName');

// call parent
Ext.ux.ThemeCombo.superclass.initComponent.apply(this, arguments);

if(false !== this.stateful && Ext.state.Manager.getProvider()) {
this.setValue(Ext.state.Manager.get(this.themeVar) || 'xtheme-default.css');
}
else {
this.setValue('xtheme-default.css');
}

} // end of function initComponent
// }}}
// {{{
,setValue:function(val) {
Ext.ux.ThemeCombo.superclass.setValue.apply(this, arguments);

// set theme
Ext.util.CSS.swapStyleSheet(this.themeVar, this.cssPath + val);

if(false !== this.stateful && Ext.state.Manager.getProvider()) {
Ext.state.Manager.set(this.themeVar, val);
}
} // eo function setValue
// }}}

}); // end of extend

// register xtype
Ext.reg('themecombo', Ext.ux.ThemeCombo);

// eof
Enjoy!

galdaka
6 Feb 2008, 11:19 PM
Hi, excellent component!!

Why not a cyclebutton like www.jadacosta.es (http://www.jadacosta.es)

Thanks in advance,

jsakalos
6 Feb 2008, 11:27 PM
Reason is simple: If you have 2 themes then cycle button is better, however, I have currently 10 themes installed so cycling through them to find the one I want seems quite awkward to me.

galdaka
6 Feb 2008, 11:42 PM
Hi,

I think that with cycle button you can select like a combobox without pass by all entries.

I

jsakalos
6 Feb 2008, 11:45 PM
Yeah, you're right. I just have theme selection hidden in config form where combo fits better than button. It's matter of taste to great degree so now users can choose... ;)

galdaka
28 Apr 2008, 11:08 PM
Hi Jsakalos,

What is the way for keep state in this component? http://www.extjs.com/forum/showthread.php?t=34014


Thanks in advance,

jsakalos
29 Apr 2008, 2:15 AM
I would use the same method as is used in all my examples: http://examples.extjs.eu If you change theme there and then you reload the page the theme is preserved. Tak a look at the source code: http://examples.extjs.eu/source.php?file=examples.js and http://examples.extjs.eu/source.php?file=js/Ext.ux.ThemeCombo.js

Stripeman
1 Jul 2008, 1:33 AM
Hi jsakalos.. I have tried to find those themes to download and have been unsuccessful. I have been to your page and dont see them either.. I looked in the source code and sure i can download each css file and each image within it.. but that would take an eternity! Do you have those themes for download and are they maintained as new versions of ext come out ?

Thanks for your time and consideration.

Terry

jsakalos
1 Jul 2008, 4:21 AM
Themes are collected from this forums. Please search.

DamianHartin
9 Aug 2008, 8:08 PM
Thanks for this sample Saki - very good extension.

I was wanting to add the combo box to a viewports north region header, do you know if this is possible?

jsakalos
9 Aug 2008, 11:32 PM
Yes, take a look at http://examples.extjs.eu, the combo is in the north.

DamianHartin
10 Aug 2008, 1:34 AM
Thanks - but I actually meant the title bar of a viewport.

For example - I've created a simple viewport from your examples, used the ThemeCombo code to make an xtype - but I wanted to add it to the title bar.

sorry - am a bit new to all of this and was even having trouble with the syntax to create the themecombo in the north region as well



Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.ns('Application');

// application main entry point
Ext.onReady(function() {

Ext.QuickTips.init();

var viewport = new Ext.Viewport({
id:'MainViewPort'
,layout:'border'
,border:true
,items:[{
region:'north'
,html: '<h1 class="x-panel-header">Title</h1>'
,autoHeight: true
,border: false
,margins: '0 0 0 0'
,collapsible:false
//,tbar:[{
//text: 'Title'
//elements: 'themecombo'
// }]
},{
region:'east'
,title: 'Hot Issues'
,width:300
,margins:'5 5 5 0'
,border:true
,xtype:'CaseList'
},{
region:'center'
,layout:'border'
,margins:'5 5 5 5'
,items:[{
region:'north'
,height:175
,title: 'Case List'
,xtype:'CaseList'
,margins:'0 5,5,5'
},
{
region:'center'
,title: 'Case Overview'
,xtype:'CaseList'
}]
}]
})

}); // eo function onReady



// eof

galdaka
10 Aug 2008, 2:24 AM
View http://extjs.com/forum/showthread.php?t=34014

Live example in www.jadacosta.es

DamianHartin
10 Aug 2008, 3:06 AM
Thanks galdaka - another great extension, but how do I actualy get the cycle button/combo box in the viewport header bar? Do you have the code from your viewport creation so I can try to understand the syntax/process?

- edit -

sorry, just looked at the page source on your example site. I will review how you've done that before posting any more questions. Thanks again

jsakalos
10 Aug 2008, 7:31 AM
Title bar of Ext component is not very suitable for placement of form fields. Much better is toolbar. You were on the right track with tbar. Something like:


tbar:[{
xtype:'themecombo'
}]

DamianHartin
11 Aug 2008, 3:05 AM
Thanks for the help guys, have now got the themecombo/cycle button appearing in a toolbar at the top of my viewport. - just a couple more quick questions:

I am assuming the only difference between adding the toolbar in the north region using the NEW keyword vs using the xtype is that the xtype will only render when referenced where as the NEW keyword will render immediatly on viewport create...

Is one way recommended above the other?

current code:




var viewport = new Ext.Viewport({
id:'MainViewPort'
,layout:'border'
,border:true
,items:[{
region:'north'
//,html: '<h1 class="x-panel-header">Title</h1>'
//,autoHeight: true
,border: false
,height:106
,margins: '0 0 0 0'
,collapsible:false
,items:[{
border:true
,height:81
,cls:'header'
},
new Ext.Toolbar({
items:[
' '
,'<b>Title<b>'
,'->'
,new Application.ThemeCycleButton()
,' ',' '
]
})
]},



Also Galdaka - how do you place your webpage image where you have above the viewport toolbar? I've tried a heap of different things but I cant get anything to apear there?

Thanks again :D

jsakalos
11 Aug 2008, 8:03 AM
Hmmm, your first assumption about rendering new vs xtype is not quite correct. Have you seen: http://blog.extjs.eu/know-how/xtype-defined/ ?

DamianHartin
11 Aug 2008, 3:12 PM
ok - thanks Saki.

From a rendering perspective there's no difference as the viewport will render each of it's sections (North/Center/South) when created, including the referenced xtype.

The benefit lies in organising my code into reusable classes (easier to manage) and if I'm only building one of these objects in response to a button click or such, it will only be rendered then.

Cheers

DamianHartin
22 Aug 2008, 7:06 PM
Hi everyone.

If your having some trouble getting this to work because you don't have/cant find xtheme-default.css, just create an empty file and make a reference to it (thanks devNull) as advised by Saki in the first thread.

The Ext library has all the theme info for the default-blue, but IE has a little issue if the file dosent exsit.

Anyway - might save you a little time looking for it. ;)

Cheers

Nand@
15 Oct 2008, 8:22 AM
hi all,

im trying with this code..and works fine but when reload the page "lose" the theme,
does not maintain the same theme...I have tried with coockies but it makes no difference :-?

any suggestion?

jsakalos
15 Oct 2008, 11:06 AM
Do you initialize state management properly early in your code? See how is it done in my examples page: http://extjs.eu

Nand@
16 Oct 2008, 5:21 AM
Yes..


Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
{....}
the cookie is like this:
s%3Axtheme-default.css
s%3Axtheme-gray.css
why's putting 's%3A' before the themes name?
i looked at the code but did not find the error :-? any idea?

--edit--
ok i fixed...well almost

theme.substring(2)
give me
xtheme-default.css \:D/
but still missing theme on reload page :-?

jsakalos
16 Oct 2008, 4:32 PM
Take a look at http://extjs.eu. Stateful ThemeCombo is used there and it keeps theme between sessions. Just do it the same way.

Nand@
17 Oct 2008, 7:53 AM
ok thanks 4 replie...i fixed...
in the main file i put a script:



<script type="text/javascript">
var theme = Cookies.get('ys-theme');
Ext.getBody().addClass('x-'+theme);
document.writeln("<link href=resources/css/"+theme+" rel=stylesheet type=text/css id=theme>");
</script>


This was the only way that I found to function...the script read the coockie and add the theme...maybe is not the best way but well..its work

azlicn
8 Jan 2009, 1:49 AM
Hi guys,

I have followed exactly what Saki has provided, but some of the panel's themes do not change accordingly. Please refer to the pic in attachment. Can somebody explain..? Tq

jsakalos
8 Jan 2009, 2:25 AM
If you're trying to mimic my examples page you need to keep in mind that it contains iframe so when changing the theme you need to change css link on both main page and iframe page.

It would be better to start with something simpler.

azlicn
11 Jan 2009, 6:05 PM
If you're trying to mimic my examples page you need to keep in mind that it contains iframe so when changing the theme you need to change css link on both main page and iframe page.

It would be better to start with something simpler.

erm..but how to change the link in iframe page? :-/

jsakalos
11 Jan 2009, 6:18 PM
Take a look at my examples page. I'm doing it there.

galdaka
12 Jan 2009, 3:04 AM
erm..but how to change the link in iframe page? :-/

... Or view www.jadacosta.es (http://www.jadacosta.es) live example ;)

Greetings,

smudgeface
21 Jan 2009, 3:58 PM
I'm digging up an old post here but I thought I would take some time to improve on Saki's design. The following will detect if the 'stateful' property is true and a stateprovider exists. If so, it will restore the previous state upon rendering this component.



Ext.ux.ThemeCombo = Ext.extend(Ext.form.ComboBox, {
// configurables
themeBlueText: 'Ext Blue Theme',
themeGrayText: 'Gray Theme',
themeBlackText: 'Black Theme',
themeOliveText: 'Olive Theme',
themePurpleText: 'Purple Theme',
themeDarkGrayText: 'Dark Gray Theme',
themeSlateText: 'Slate Theme',
themeVistaText: 'Vista Theme',
themePeppermintText: 'Peppermint Theme',
themeChocolateText: 'Chocolate Theme',
selectThemeText: 'Select Theme',
lazyRender:true,
lazyInit:true,
cssPath:'./lib/extjs/resources/css/',
stateful:false,
defaultTheme:'xtheme-default.css',

initComponent:function() {

Ext.apply(this, {
store: new Ext.data.SimpleStore({
fields: ['themeFile', 'themeName'],
data: [
['xtheme-default.css', this.themeBlueText]
,['xtheme-gray.css', this.themeGrayText]
,['xtheme-darkgray.css', this.themeDarkGrayText]
,['xtheme-black.css', this.themeBlackText]
,['xtheme-olive.css', this.themeOliveText]
,['xtheme-purple.css', this.themePurpleText]
,['xtheme-slate.css', this.themeSlateText]
,['xtheme-peppermint.css', this.themePeppermintText]
,['xtheme-chocolate.css', this.themeChocolateText]
]
}),
valueField: 'themeFile',
displayField: 'themeName',
triggerAction:'all',
mode: 'local',
forceSelection:true,
editable:false,
fieldLabel: this.selectThemeText
}); // end of apply

// call parent
Ext.ux.ThemeCombo.superclass.initComponent.apply(this, arguments);

if(this.stateful && Ext.state.Manager.getProvider()){
var theme = Ext.state.Manager.getProvider().get('theme',this.defaultTheme);
Ext.util.CSS.swapStyleSheet('theme', this.cssPath + theme);
this.setValue(theme);
}
},

onSelect:function() {
// call parent
Ext.ux.ThemeCombo.superclass.onSelect.apply(this, arguments);

// set theme
var theme = this.getValue();
Ext.util.CSS.swapStyleSheet('theme', this.cssPath + theme);

if(Ext.state.Manager.getProvider()) {
Ext.state.Manager.set('theme', theme);
}
this.collapse();
}

}); // end of extend

azlicn
21 Jan 2009, 11:30 PM
Take a look at my examples page. I'm doing it there.

Actually I managed to change the themes for the iFrame part, but not navigation (north and south) and the header...:(

jsakalos
22 Jan 2009, 12:50 AM
@smudgeface, if you really want ThemeCombo to honor stateful config option then you have to test it also in onSelect method and do not save state if it is false.

jsakalos
22 Jan 2009, 12:51 AM
@azlicn, yes, setting themes in both main page and iframe can be tricky. Anyway, take another look at my page, it works there.

galdaka
22 Jan 2009, 1:16 AM
Thanks for this sample Saki - very good extension.

I was wanting to add the combo box to a viewports north region header, do you know if this is possible?

Yes, is posible. View www.jadacosta.es

smudgeface
22 Jan 2009, 11:31 AM
@smudgeface, if you really want ThemeCombo to honor stateful config option then you have to test it also in onSelect method and do not save state if it is false.

That's what I thought originally as well but I was corrected by Condor.
http://extjs.com/forum/showthread.php?p=266525#post266525

However I agree with you - stateful = false implys no state saving. I argue that further in the link above. Here's some updated code...





Ext.ux.ThemeCombo = Ext.extend(Ext.form.ComboBox, {
// configurables
themeBlueText: 'Ext Blue Theme',
themeGrayText: 'Gray Theme',
themeBlackText: 'Black Theme',
themeOliveText: 'Olive Theme',
themePurpleText: 'Purple Theme',
themeDarkGrayText: 'Dark Gray Theme',
themeSlateText: 'Slate Theme',
themeVistaText: 'Vista Theme',
themePeppermintText: 'Peppermint Theme',
themeChocolateText: 'Chocolate Theme',
selectThemeText: 'Select Theme',
lazyRender:true,
lazyInit:true,
cssPath:'./css/themes/css/',
stateful:false,
defaultTheme:'xtheme-default.css',

initComponent:function() {

Ext.apply(this, {
store: new Ext.data.SimpleStore({
fields: ['themeFile', 'themeName'],
data: [
['xtheme-default.css', this.themeBlueText],
['xtheme-gray-extend.css', this.themeGrayText],
['xtheme-darkgray.css', this.themeDarkGrayText],
['xtheme-black.css', this.themeBlackText],
['xtheme-olive.css', this.themeOliveText],
['xtheme-purple.css', this.themePurpleText],
['xtheme-slate.css', this.themeSlateText],
['xtheme-peppermint.css', this.themePeppermintText],
['xtheme-chocolate.css', this.themeChocolateText]
]
}),
valueField: 'themeFile',
displayField: 'themeName',
triggerAction:'all',
mode: 'local',
forceSelection:true,
editable:false,
fieldLabel: this.selectThemeText
}); // end of apply

// call parent
Ext.ux.ThemeCombo.superclass.initComponent.apply(this, arguments);

if(this.stateful && Ext.state.Manager.getProvider()){
var theme = Ext.state.Manager.getProvider().get('theme',this.defaultTheme);
Ext.util.CSS.swapStyleSheet('theme', this.cssPath + theme);
this.setValue(theme);
}
},

onSelect:function() {
// call parent
Ext.ux.ThemeCombo.superclass.onSelect.apply(this, arguments);

// set theme
var theme = this.getValue();
Ext.util.CSS.swapStyleSheet('theme', this.cssPath + theme);

if(this.stateful && Ext.state.Manager.getProvider()) {
Ext.state.Manager.set('theme', theme);
}
this.collapse();
}

}); // end of extend

jsakalos
22 Jan 2009, 3:29 PM
There are some problems with the above code mainly the test for stateful must be:


false !== this.stateful

to keep it consistent with Ext.Component. Also you've been working with some older code - I don't know which one, you've stripped off the header.

Anyway, I've implemented stateful test, see the updated code in the first post.

Note: Stripping the header of someone else's code in not legal as it contains license. You can take it modify it, use it, even sell it, provided that the header stays.

smudgeface
22 Jan 2009, 5:45 PM
Saki,

FYI, I only stripped out the header to keep the updated code concise in the post. But, I get your point about licensing. They exist in my actual code...

On another note, the links to chocolate, peppermint, and vista are broken in the forums. Would you mind post them as a zipped attachment?

jsakalos
22 Jan 2009, 7:21 PM
I cannot, it's again licensing issue. Just delete them from the code of ThemeCombo. Anyway, some users may not want to expose all themes I have...

vitolini
17 Feb 2009, 2:19 PM
Thanks for the great component. However I am facing some issues with FF. The theme combo works fine in IE but when I change the selectin in FF nothing happens... Here is how I set it up...


<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/themes/xtheme-chocolate.css" id="theme"/>
<script type="text/javascript" src="js/ext-plugins/Ext.ux.form.ThemeCombo.js"></script>



var themeCombo = new Ext.ux.form.ThemeCombo({}); themeCombo.render('combo');
<body><div id="combo"/></body>I checked the paths to make sure all js and css files are referenced correctly. So there is no problem there. What am I missing?

Second issue - this is not necessarily tied into this component but i am sure you can answer it.
The second line above sets the initial theme that should load (xtheme-chocolate.css). But that doesn't have any effect either (both for IE and FF). I still get the default blue one upon initial load.
When I choose chocolate from the themecombo it works fine (only in IE as I said earlier not if FF)

Thanks,

vitolini
17 Feb 2009, 10:22 PM
ok after further diagnosis, i brought the code down to couple lines only; getting rid of everything i had; hoping that maybe something i put in broke the code... but to no avail... It still works fine in IE and not correct in FF... If you check the screenshots, one of the labels actually change color in FF but not the background or anything. So I am sure it finds the css... Here is the code...



<html><br><head>

<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/themes/xtheme-default.css" id="theme"/>
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="js/ext-plugins/Ext.ux.form.ThemeCombo.js"></script>
<script type="text/javascript">

Ext.onReady(function()
{
var form = new Ext.FormPanel(
{
frame: true,
title: 'Contact Details',
width: 420,
items: [
{
cls:'header',
html:'<div style="width:300px;">How can we reach you?</div>'
},
{
xtype: 'themecombo',
id:'theme-combo'
}
]
});

form.render('main');
});

</script>

</head>

<body>
<div id="main"/>
</body>

</html>

jsakalos
17 Feb 2009, 11:11 PM
Try this:


<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/themes/xtheme-default.css" id="theme"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="js/Ext.ux.form.ThemeCombo.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL='ext/resources/images/default/s.gif';
Ext.onReady(function(){
var form = new Ext.FormPanel({
frame: true,
title: 'Contact Details',
renderTo:'main',
width: 420,
items: [{
cls:'header',
html:'<div style="width:300px;">How can we reach you?</div>'
},{
xtype: 'themecombo',
id:'theme-combo'
}]
});
});

</script>
</head>

<body>
<div id="main"></div>
</body>

</html>

vitolini
18 Feb 2009, 10:07 AM
Saki, unfortunately that doesn't help. After all, you are just suggesting that i change my paths but what i posted is how my folder is structured... If there was an error, it wouldn't generate the form with the combo at the first place. Bu tjust in case, i changed the folder structure to match your post and that still didn't help :(


Try this:


<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/themes/xtheme-default.css" id="theme"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="js/Ext.ux.form.ThemeCombo.js"></script>
<script type="text/javascript">

Ext.BLANK_IMAGE_URL='ext/resources/images/default/s.gif';
Ext.onReady(function(){
var form = new Ext.FormPanel({
frame: true,
title: 'Contact Details',
renderTo:'main',
width: 420,
items: [{
cls:'header',
html:'<div style="width:300px;">How can we reach you?</div>'
},{
xtype: 'themecombo',
id:'theme-combo'
}]
});
});

</script>
</head>

<body>
<div id="main"></div>
</body>

</html>

jsakalos
18 Feb 2009, 10:20 AM
Not only. You had <br> between <html> and <head> that makes page invalid. You haven't had correct path to BLANK_IMAGE_URL.

Of course, themes must contain valid paths. The above works for me.

vitolini
18 Feb 2009, 10:41 AM
Saki, you were right, it was the <br> causing the problem, thanks for pointing out :)

smudgeface
19 Feb 2009, 12:27 AM
is this a case where firefox failed and ie did not...hmmm, how very odd...:-?

vitolini
19 Feb 2009, 1:56 PM
Yep. To be honest i had more convenience with IE tolerating inproper html than with FF. You can argue if that's a good thing or not but that's the case :))


is this a case where firefox failed and ie did not...hmmm, how very odd...:-?

kcireneg
31 Mar 2009, 10:57 PM
where would I get those css files??? the xthemes.
pls. help.

jsakalos
1 Apr 2009, 1:18 AM
Search forums, especially User Extensions and Plugins.

gotcha
18 Sep 2009, 7:06 AM
Hello Saki,
I was going through your examples (http://extjs.eu/#extension-4) , and I noticed the link for themecombo is not right. Could you please fix it? I would like to use your extensions!
Thanks!

jsakalos
18 Sep 2009, 3:20 PM
Hmmm, that link brings me here: http://www.extjs.com/forum/showthread.php?t=25564 and it is the correct thread. Where do you get?

Take a look also here: http://extjs.eu/docs/?class=Ext.ux.form.ThemeCombo

gotcha
18 Sep 2009, 5:28 PM
Hmmm, that link brings me here: http://www.extjs.com/forum/showthread.php?t=25564 and it is the correct thread. Where do you get?

Take a look also here: http://extjs.eu/docs/?class=Ext.ux.form.ThemeCombo

Aah.. Perhaps, I should have been more descriptive.

Ok.. On said page - I tried to click on the image against your excellent extensions.

For example, the links for the following topics work.

record form - http://recordform.extjs.eu/
arraytree - http://arraytree.extjs.eu/

The above links provide me with great info, such as, examples, downloads of the code, etc...

While the ones for the below extensions, the links on the images seem to different.

ThemeCombo - http://rowactions.extjs.eu/
HttpProvider- http://rowactions.extjs.eu/

Perhaps, you can point me to the right links? Thanks.

jsakalos
19 Sep 2009, 12:13 AM
Links are correct because ThemeCombo does not have its own demo page but is used in the RowActions page. The same is true for HttpProvider.

JoyfulBobHome
5 Apr 2010, 1:57 PM
Search forums, especially User Extensions and Plugins.

Very nice extension, Saki.

I searched the forums and couldn't find the specific themes used here; can someone provide a direct link?

Thanks!

jsakalos
5 Apr 2010, 3:48 PM
Try this: http://extthemes.com/

completej
5 May 2010, 4:17 AM
Sorry to bother...

I recently upgraded to 3.1.1, and themes stopped saving on a reload / refresh of the page. Your themecombo had been working well, but now I can't seem to tell where or what changed to correct this.

edit: forgot to mention - on change of the theme, it will modify the appearance of my windows and whatnot, just wont save.

Could you please give me some advice as to where I should look (or how I should test) to get this working again?

Thanks,

jsakalos
5 May 2010, 4:23 AM
From which version have you upgraded?

completej
5 May 2010, 4:24 AM
I jumped from 3.0.0 to 3.1.1

jsakalos
5 May 2010, 4:26 AM
That shouldn't be such big change to break something. See if state is saved correctly - if you save the selected theme in state.

completej
5 May 2010, 4:33 AM
inside Ext.ux.form.ThemeCombo.js:



,initComponent:function() {
var config = {
store: new Ext.data.SimpleStore({
fields: ['themeFile', {name:'themeName', type:'string'}]
,data: [
['xtheme-default.css', this.themeBlueText]
,['xtheme-2brave.css', this.theme2braveText]
,['xtheme-darkgray.css', this.themeDarkGrayText]
,['xtheme-galdaka.css', this.themeGaldakaText]
,['xtheme-gray-extend.css', this.themeGrayExtndText]
,['xtheme-green.css', this.themeGreenText]
,['xtheme-indigo.css', this.themeIndigoText]
,['xtheme-midnight.css', this.themeMidnightText]
,['xtheme-olive.css', this.themeOliveText]
,['xtheme-pink.css', this.themePinkText]
,['xtheme-purple.css', this.themePurpleText]
,['xtheme-slate.css', this.themeSlateText]
,['xtheme-vista.css', this.themeVistaText]
]
})
,valueField: 'themeFile'
,displayField: 'themeName'
,triggerAction:'all'
,mode: 'local'
,forceSelection:true
,editable:false
,fieldLabel: this.selectThemeText
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

this.store.sort('themeName');

// call parent
Ext.ux.form.ThemeCombo.superclass.initComponent.apply(this, arguments);

if(false !== this.stateful && Ext.state.Manager.getProvider()) {
this.setValue(Ext.state.Manager.get(this.themeVar) || 'xtheme-default.css');
console.log('getting theme "' + Ext.state.Manager.get(this.themeVar) + '" ');
} else {
this.setValue('xtheme-default.css');
console.log('else1');
}

} // end of function initComponent
// }}}
// {{{
,setValue:function(val) {
Ext.ux.form.ThemeCombo.superclass.setValue.apply(this, arguments);

// set theme
Ext.util.CSS.swapStyleSheet(this.themeVar, this.cssPath + val);
console.log('switching "' + this.themeVar + '", "' + this.cssPath + '", "' + val + '"');

if(false !== this.stateful && Ext.state.Manager.getProvider()) {
Ext.state.Manager.set(this.themeVar, val);
console.log('false !== this.stateful && Ext.state.Manager.getProvider()');
} else {
console.log('else2');
}
} // eo function setValue
// }}}
i get this in the firebug console:



switching "theme", "http://URL/ext-3.1.1/resources/css/", "xtheme-default.css"
false !== this.stateful && Ext.state.Manager.getProvider()
getting theme "xtheme-default.css"


when i switch the theme, i get the following:



switching "theme", "http://URL/ext-3.1.1/resources/css/", "xtheme-midnight.css"
false !== this.stateful && Ext.state.Manager.getProvider()


and when i reload, it goes back to the default theme. would you instruct me on how to see if state is saved correctly please? it doesn't appear that it is...

jsakalos
5 May 2010, 5:36 AM
Once again, check if state is saved and then restored on reload. It may be that stat is not yet available when setting the combo value.

completej
5 May 2010, 5:47 AM
Could you point me in the right direction on how to check if the state is being saved please? Little lost searching for that...

jsakalos
5 May 2010, 6:50 AM
See Ext.state.Manager and Ext.state.Provider.

completej
5 May 2010, 8:14 AM
this.setValue(Ext.state.Manager.get(this.themeVar) || 'xtheme-default.css');
(edit) this.themeVar (/edit) is always undefined when the page loads initially, and forces the default theme.

i then choose a theme from the selector, it changes state.


Ext.state.Managercorrectly displays the state with the new .css selected.

A reload of the page, however, goes back to the initial problem with the initialization returning undefined, thus defaulting to the original, default .css sheet.

my onready:



Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider);
});
Thanks for your responses so far - I'm really trying to stumble through this. Where else could I look? I'm not sure how to use Ext.state.Provider to assist in this matter.

jsakalos
5 May 2010, 8:42 AM
So the undefined value of themeVar is the problem. Find out why it's undefined.

completej
5 May 2010, 10:44 AM
That's where I'm scratching my head.

edit: fwiw, normal "desktop" windows retain sizing on a browser reload, as well as other grid stateful settings.

My understanding of this plugin - it has two methods, to initialize and determine a value of a theme, and to set a value. If it is initializing and finds no prior value set, then it defaults to a predefined value. It then sets that value.


On load, inside the initialization, and before setValue:


console.log(this.themeVar);
console.log(Ext.state.Manager.get(this.themeVar));
console reads



theme
undefined


this.stateful
this returns true, and



Ext.state.Manager.getProvider()
is also true, so it attempts



this.setValue(Ext.state.Manager.get(this.themeVar) || 'xtheme-default.css');
which (im assuming) attempts to setValue(undefined), and if it cannot, attempts setValue('xtheme-default.css')

since that is hardcoded, it never fails, and always resets to default.

one that is completed, i load the themeselector, select a theme, and see that setValue contains the new .css ive selected. If i access the state manager, I see that the state is now set. It is stateful, the manager can be accessed, thus it seems as if it has saved.


Reload the page, and it goes back to square one.

so. between accessing the statemanager via console, seeing the correct theme, and a reload, it is getting reset somehow. i went as far as to copy your original post back in, editing only the css locations and file names, confirm they work with a switch, reload, and nothing. if themeVar is undefined when it loads, state manager is not being correctly saved to? not sure how to phrase what I mean...

sorry for the rambling; typing it all out sometimes helps me realize what im doing wrong. im pretty sure this error began when i backed up 3.0.0 and moved to 3.1.1, but it was a couple weeks before anyone noticed and let me know it was no longer working.

jsakalos
5 May 2010, 11:32 AM
You're on the good road. Find where is "theme" variable set, or should be set and find why it is not set. Still I think the it is not yet set at the time it is used.

completej
6 May 2010, 6:35 AM
Well, I managed to solve the problem with your guidance (if you ever come to Texas, I owe you several beers, cheers!), and I feel I have a greater understanding of my serious misunderstanding of this framework (haha).

I had taken to separating all my JS files per application, and took that a bit too far. I was (not lazily) creating a themecombo window in a file that was occurring before the document was ready. This was firing the init, causing the undefined error of themeVar.

My question is now this - if I create the theme window in the onReady func


var xtheme_window = new Ext.Window({
xtype: 'window'
, id: 'xtheme-window'
, title: 'Theme selector'
, height: 300
, width: 300
, iconCls:'xtheme'
, shim: true
, animCollapse: false
, constrainHeader: true
, autoDestroy: false
, autoHeight: true
, closeAction: 'hide'
/*
, tbar: [
{
xtype: 'themecombo'
, anchor: '100%'
, frame: false
, border: false
}
]
*/
, items: [
xtheme_panel
]
});
});

themes now work as expected. If i lazily create that window, init never occurs and the themes are not loaded. I know that this is a newbie mistake and I was finding a shortcut around it, and i have a pretty extensive desktop system now where the windows work properly. What should I research to correctly, lazily, instantiate a window with themes while also loading / initializing the saved theme info?

jsakalos
6 May 2010, 10:29 AM
Setting a theme and later changing of theme are two different things. You should set theme as soon as possible but you can change theme not sooner than in onReady.

mjhaston
29 Dec 2010, 8:27 AM
Great extension. Plug and play. Even for a dummy like me ... got it working in about a minute! Thank you Saki.

jsakalos
31 Dec 2010, 2:38 AM
You're welcome. I'm glad you like it.

Landish
15 Mar 2014, 5:14 PM
It's been a while, since this thread was opened, but does it work with Ext 4.2.x?