日期:2014-05-16  浏览次数:20344 次

Extjs TreePanel在Firefox下显示不正常 自定义样式实现不好

Extjs TreePanel在Firefox下显示不正常,在IE下显示正常。想自定义样式,结果只有一部分背景色改变,有时还有一些组件因为更改样式而消失了,望高手赐教。

?

界面代码如下:

Ext.onReady(function() {
?Ext.QuickTips.init();// 浮动信息提示
?Ext.BLANK_IMAGE_URL = 'extjs/resources/themes/images/default/tree/s.gif';// 替换图片文件地址为本地
?// 主界面上方面板,放置LoGo,或是工具栏
?var isCenterClear = false;// 显示操作面板是否被清空的标志
?var isSkinChanged = false;// 皮肤改变的标志
?var temp = 0;
?// 存储主题样式路径的数组
?var skinsPath = new Array();
?skinsPath[0] = "";
?skinsPath[1] = "theme/red_orange/xtheme-red5.css";
?skinsPath[2] = "theme/blueen/css/xtheme-blueen.css";
?skinsPath[3] = "theme/slate/css/xtheme-slate.css";
?skinsPath[4] = "theme/TargetProcessSkin/css/xtheme-tp.css";
?skinsPath[5] = "theme/red_orange/xtheme-orange.css";
?skinsPath[6] = "theme/other/xtheme-black.css";
?skinsPath[7] = "theme/other/xtheme-chocolate.css";
?skinsPath[8] = "theme/other/xtheme-darkgray.css";
?skinsPath[9] = "theme/other/xtheme-green.css";
?skinsPath[10] = "theme/other/xtheme-indigo.css";
?skinsPath[11] = "theme/other/xtheme-midnight.css";
?// 主界面顶端显示Logo的面板
?var top = Ext.create('Ext.panel.Panel', {
????title : "管理系统",
????bodyPadding : 0,
????iconCls : 'MyTopPanelIcon',
????region : 'north',
????height : 110,
????html : '<img src="images/logo.PNG" width=100% height="57" />',
????bbar : [{
?????layout : 'border',
?????text : '通用管理系统平台',
?????icon : 'images/Application.png',
?????id : 'gudingzichan',
?????menu : [{
??????text : '固定资产管理系统',
??????icon : 'images/Equipment.png',
??????handler : function() {
???????getTree(left, center1,
?????????"users/navigationAction.action");
??????}
?????}, {
??????text : 'Item 2'
?????}, {
??????text : 'Item 3'
?????}, {
??????text : 'Item 4'
?????}]
????}, {
?????xtype : 'tbfill'
????}, {
?????text : '换肤',
?????icon : 'images/skin.png',
?????xtype : 'button'
????}]
???});
?// 主界面左边面板,放置导航菜单(TreePanel数组)
?var left = Ext.create('Ext.panel.Panel', {
????id : 'left',
????title : '功能导航',
????iconCls : 'MyNavigatePanelIcon',
????region : 'west',
????margins : '5 0 5 5',
????split : true,
????width : 210,
????autoHeight : true,
????autoScroll : true,
????layout : 'accordion',
????collapsible : true,
????rootVisible : false,
????items : [],
????bbar : {// 实现一键换肤功能
?????items : [{
??????text : '换肤',
??????icon : 'images/skin.png',
??????handler : function() {
???????var count = skinsPath.length;
???????if (temp < count) {

????????Ext.util.CSS.swapStyleSheet("theme",
??????????skinsPath[temp]);
????????++temp;
???????} else {
????????temp = 0;
????????Ext.util.CSS.swapStyleSheet("theme",
??????????skinsPath[temp]);
????????temp++;
???????}
??????}
?????}]
????}
???});
?// 主界面下方面板,显示版权信息
?var bottom = Ext.create('Ext.panel.Panel', {
????id : 'bottom',
????region : 'south',
????// title : 'Information',
????autoHeight : true,
????border : false,
????margins : '0 0 5 0',
????collapsible : true,
????// html : '版权所有,翻版必究!',
????split : true,
????height : 30,
????minHeight : 30,
????bodyStyle : "padding: 10px; font-size: 12px; text-align:center;"
???});
?// 主界面下方面板,显示版权信息
?var right = Ext.create('Ext.panel.Panel', {
????region : 'east',
????title : '账簿报表',
????iconCls : 'MyAccountBookIcon',
????collapsible : true,
????split : true,
????width : 150
???});
?// 主界面中中间显示用户操作结果的面板
?var center1 = Ext.create('Ext.tab.Panel', {
????region : "center",
????title : '操作显示面板',
????iconCls : 'MyDisplayPanelIcon',
????bod