Ext 主题切换

<%@ 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>

你可能感兴趣的:(Ext 主题切换)