ExtJs4 选主题控件 - examples源码分析

这篇文章分析每个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"/>');
}