这篇文章分析每个example中选主题控件:
引入文件:
<script type="text/javascript" src="../../examples/shared/include-ext.js"></script> // 对theme的处理
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script> // 设置toolbar
toolbar源码:
toolbar = Ext.widget({
xtype: 'toolbar',
border: true,
rtl: false, // 靠左
id: 'options-toolbar',
floating: true,
fixed: true,
preventFocusOnActivate: true,
draggable: { //可拖动的
constrain: true
},
items: [{
xtype: 'combo',
rtl: false,
width: 170,
labelWidth: 45,
fieldLabel: 'Theme',
displayField: 'name', // 显示名
valueField: 'value', // value的字段
labelStyle: 'cursor:move;',
margin: '0 5 0 0',
store: Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data : [
{ value: 'access', name: 'Accessibility' },
{ value: 'classic', name: 'Classic' },
{ value: 'gray', name: 'Gray' },
{ value: 'neptune', name: 'Neptune' }
]
}),
value: theme, // 初始化值
listeners: {
select: function(combo) {
var theme = combo.getValue();
if (theme !== defaultTheme) {
setParam({ theme: theme }); // 设值
} else {
removeParam('theme');
}
}
}
}, {
xtype: 'button', // 设置左对齐,还是右对齐
rtl: false,
hidden: !(Ext.repoDevMode || location.href.indexOf('qa.sencha.com') !== -1),
enableToggle: true,
pressed: rtl,
text: 'RTL',
margin: '0 5 0 0',
listeners: {
toggle: function(btn, pressed) {
if (pressed) {
setParam({ rtl: true });
} else {
removeParam('rtl');
}
}
}
}, {
xtype: 'tool', // 关闭按钮
type: 'close',
rtl: false,
handler: function() {
toolbar.destroy(); // 删除toolbar
}
}],
// Extra constraint margins within default constrain region of parentNode
constraintInsets: '0 -' + (Ext.getScrollbarSize().width + 4) + ' 0 0' // 限制与父框架的距离
});
toolbar.show();
设置参数代码:
function setParam(param) {
// 传入的param(Object {theme: "classic"})
// queryString结果为:theme=classic
var queryString = Ext.Object.toQueryString(
Ext.apply(Ext.Object.fromQueryString(location.search), param)
);
location.search = queryString;
}
对theme的处理:
获取地址栏参数的函数:
function getQueryParam(name) {
var regex = RegExp('[?&]' + name + '=([^&]*)');
var match = regex.exec(location.search) || regex.exec(path);
return match && decodeURIComponent(match[1]);
}
给theme赋值:
theme = getQueryParam('theme') || 'neptune'
加到suffix数组里:
if (theme && theme !== 'classic') {
suffix.push(theme);
}
动态输出css:
if (includeCSS) {
document.write('<link rel="stylesheet" type="text/css" href="' + path + '/resources/css/ext-all' + suffix + '-debug.css"/>');
}