1、在页面中增加一个放样式文件的地方：
<link rel="stylesheet" type="text/css" href="ext/2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/2.0/ext-all.js"></script>
<!-- 下面这行 -->
<link id="theme" rel="stylesheet" type="text/css" href="ext/2.0/resources/css/xtheme-default.css" />
2、定义一个combox，将可选样式作为数据源填入下拉列表：
定义样式数据
Ext.simpledata.themes = [
['Default', 'ext-2.2/resources/css/xtheme-default.css'],
['Calista', 'ext-2.2/resources/css/xtheme-calista.css'],
['Gray', 'ext-2.2/resources/css/xtheme-gray.css']
];
定义下拉数据源和combox：
var themestore = new Ext.data.SimpleStore({
fields: ['Name', 'File'],
data: Ext.simpledata.themes
});
this.cboTheme = new Ext.form.ComboBox({
id: 'ux-startcombo-theme',
store: themestore,
valueField: 'File',
displayField: 'Name',
mode: 'local',
typeAhead: true,
editable: false,
triggerAction: 'all',
value: 'ext-2.2/resources/css/xtheme-default.css',//先用默认的
selectOnFocus: true,
width: 100
});
this.cboTheme.on('select', function(combo) {
var value = combo.getValue();
Ext.util.CSS.swapStyleSheet(‘theme’, value);
}, this);
3、完成。
- 1
- 2
前往页