您的位置：首页 > 其它

Ext 主题切换

2011-02-17 11:25 260 查看

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<link rel="stylesheet" href="extjs/resources/css/ext-all.css" mce_href="extjs/resources/css/ext-all.css"/>
<link rel="stylesheet" id="theme"/>

<!-- ext 核心库 -->
<mce:script type="text/javascript" src="extjs/adapter/ext/ext-base.js" mce_src="extjs/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="extjs/ext-all.js" mce_src="extjs/ext-all.js"></mce:script>
</head>

<body style="text-align:center;margin: 0;" mce_style="text-align:center;margin: 0;">
<div style="width:100px;height:100px;background: red" id="target">a</div>
</body>

<mce:script type="text/javascript"><!--
Ext.onReady(function(){
var data = {
id: 'themeSelect',
name: 'loowj',
size: 3,
options: [
{value:'default',text:"默认主题"},
{value:'gray',text:"gray"},
{value:'black',text:"black"}
]
};
var t = new Ext.XTemplate(
'<select id="{id}" name="{name}" size="{size}">',
'<tpl for="options">',
/*
'<tpl if="xindex%2==0">',
'<option value="{value:trim}">',
'{text:ellipsis(5)}',
'</option>',
'</tpl>',

'<tpl if="xindex%2==1">',
'<option value="{value:trim}" selected=true>',
'{text:ellipsis(5)}',
'</option>',
'</tpl>',
*/
'<option value="{value}" {[xindex ==1 ?"selected=true" : ""]}>',
'{text:ellipsis(5)}',
'</option>',
'</tpl>',
'</select>'
);
t.append('target', data);
Ext.get("themeSelect").on("change",function(e){
var v = e.target.value;

if(v == 'black'){
Ext.util.CSS.swapStyleSheet("theme","extjs/resources/css/xtheme-black.css");
Ext.Msg.alert("aa","bb");
}else if(v == 'gray'){
Ext.util.CSS.swapStyleSheet("theme","extjs/resources/css/xtheme-gray.css");
Ext.Msg.alert("aa","bb");
}else{
Ext.util.CSS.swapStyleSheet("theme","extjs/resources/css/ext-all.css");
Ext.Msg.alert("aa","bb");
}
});

})

// --></mce:script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航