ext的换肤功能本身是很简单的,使用工具类Ext.util.CSS即可轻松实现换肤,
页面的换肤也不复杂,就是根据主题的设置加载进来相应的css文件。问题是
我要在现有的项目上实现换肤,现在手头上的项目结构比较复杂,是frame中嵌套frame,
所以处理起来就有些麻烦,下面就是实现换肤功能的主要代码:
<select style="width:65px; height:; background-color:#c9e8fc; border:solid 1px #7dbad7; font-size:12px; color:#" name="themeset" id="themeset" οnchange="changeTheme();">
<option id="ext-all" value="ext-all.css">默认</option>
<option id="xtheme-green" value="xtheme-green.css" >绿色</option>
<option id="xtheme-olive" value="xtheme-olive.css">橄榄色</option>
<option id="xtheme-pink" value="xtheme-pink.css">粉色</option>
<option id="xtheme-purple" value="xtheme-purple.css">紫色</option>
<option id="xtheme-gray" value="xtheme-gray.css">浅灰色</option>
<option id="xtheme-darkgray" value="xtheme-darkgray.css">深灰色</option>
<option id="xtheme-slate" value="xtheme-slate.css">暗蓝色</option>
<option id="xtheme-black" value="xtheme-black.css">黑色</option>
</select>
************************************************
<script type="text/javascript">
//默认显示上次设置的主题
window.onload = function(){
var cookiesArr = document.cookie.split(";");
var cssName = "";
for(var i=0; i<cookiesArr.length; i++){
var arr = cookiesArr[i].split("=");
if(arr[0] == "css"){
cssName = arr[1];
break;
}
}
if(cssName != ""){
window.parent.frames["mainFrame"].Ext.util.CSS.swapStyleSheet('theme', '<%=path%>/extjs3.0/resources/css/'+ cssName);
var win = window.parent.frames["mainFrame"].frames["I3"];
win.Ext.util.CSS.swapStyleSheet('theme', '<%=path%>/extjs3.0/resources/css/'+ cssName);
}
//select框中显示先前设置的主题
var pretheme = cssName.split(".");
var prethemecolor = pretheme[0];
$("#"+prethemecolor).attr("selected","selected");
}
</script>
<script type="text/javascript">
//主题设置
function changeTheme(){
var themeName = document.getElementById("themeset").value;
//设置cookie
var date = new Date();
date.setTime(date.getTime() + 30*24*3066*1000);//30天后的日期
document.cookie = "css=" + themeName + ";expires=" + date.toGMTString();
var doci3 = window.parent.frames["mainFrame"].frames["I3"].document;
doci3.cookie = "css=" + themeName + ";expires=" + date.toGMTString();
//改变ext弹出框的风格样式
window.parent.frames["mainFrame"].Ext.util.CSS.swapStyleSheet('theme', '<%=path%>/extjs3.0/resources/css/'+ themeName);
var win = window.parent.frames["mainFrame"].document.getElementById("I3").contentWindow;
win.Ext.util.CSS.swapStyleSheet('theme', '<%=path%>/extjs3.0/resources/css/'+ themeName);
}
</script>
*******************************************************
在各个frame中的页面上都要先加载换肤代码。
?????????????????????????
现在请大家帮我解决一个问题:上述代码在IE中一切都ok,火狐浏览器中遇到了个不算小的问题:
因为有些页面上使用了jsp:include引进来了一个小页面,这个小页面中运用了ext,问题来了:
在Firefox中include进来的小页面中的ext弹出窗口都没有实现换肤???高手们认为是什么原因呢?