[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题
最后更新于：2022-04-01 07:37:32
本文地址：[http://blog.csdn.net/sushengmiyan/article/details/42016107](http://blog.csdn.net/sushengmiyan/article/details/42016107)
本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan)
------------------------------------------------------------------------------------------------------------------------------------
为方便起见，使用sencha cmd创建一个工程，使用app build命令build工程，使用web start命令启动服务。
好了，现在更改下main.js中的一点代码，增加如下内容到panel中：
~~~
,{
xtype: 'combo',
width: '100',
labelWidth: '40',
fieldLabel: 'Theme',
displayField: 'name',
valueField: 'value',
//labelStyle: 'cursor:move;',
//margin: '5 5 5 5',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{ value: 'neptune', name: 'Neptune主题' },
{ value: 'neptune-touch', name: 'Neptune Touch主题' },
{ value: 'crisp', name: 'Crisp主题' },
{ value: 'crisp-touch', name: 'Crisp Touch主题' },
{ value: 'classic', name: 'Classic主题' },
{ value: 'gray', name: 'Gray主题' }
]
}),
//value: theme,
listeners: {
select: function(combo) {
var theme = combo.getValue();
var href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css';
var link = Ext.fly('theme');
if(!link) {
link = Ext.getHead().appendChild({
tag:'link',
id:'theme',
rel:'stylesheet',
href:''
});
};
link.set({href:Ext.String.format(href, theme)});
}
}
}
~~~
main.js代码应该如下所示：（完整内容）
~~~
/**
* This class is the main view for the application. It is specified in app.js as the
* "autoCreateViewport" property. That setting automatically applies the "viewport"
* plugin to promote that instance of this class to the body element.
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('oaSystem.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'oaSystem.view.main.MainController',
'oaSystem.view.main.MainModel'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
},{
xtype: 'combo',
width: '100',
labelWidth: '40',
fieldLabel: 'Theme',
displayField: 'name',
valueField: 'value',
//labelStyle: 'cursor:move;',
//margin: '5 5 5 5',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{ value: 'neptune', name: 'Neptune主题' },
{ value: 'neptune-touch', name: 'Neptune Touch主题' },
{ value: 'crisp', name: 'Crisp主题' },
{ value: 'crisp-touch', name: 'Crisp Touch主题' },
{ value: 'classic', name: 'Classic主题' },
{ value: 'gray', name: 'Gray主题' }
]
}),
//value: theme,
listeners: {
select: function(combo) {
var theme = combo.getValue();
var href = 'ext/packages/ext-theme-'+theme+'/build/resources/ext-theme-'+theme+'-all.css';
var link = Ext.fly('theme');
if(!link) {
link = Ext.getHead().appendChild({
tag:'link',
id:'theme',
rel:'stylesheet',
href:''
});
};
link.set({href:Ext.String.format(href, theme)});
}
}
}]
},{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: '<h2>Content appropriate for the current navigation.</h2>'
}]
}]
});
~~~
纠结了很久的问题终于释怀了。之前看的都是使用swapstylesheet我一直么有成功过。偶尔看的了这篇文章，觉得不错，果真成功了。
[http://extjs.eu/lightweight-theming/](http://extjs.eu/lightweight-theming/)
推荐一下，这个网站，内容比较充实，界面也比较好看。就是有些插件需要花钱购买。