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',
????bodyPadding : 3,
????resizetabs : true,
????minTabWidth : 115,
????tabWidth : 135,
????enableTabScroll : true,
????width : '100%',
????height : '100%',
????defaults : {
?????autoScroll : true
????},
????items : {
?????id : "default",
?????title : '欢迎使用固定资产管理系统',
?????width : '100%',
?????height : '100%',
?????closable : true,
?????html : '欢迎使用固定资产管理系统',
?????autoLoad : {
??????url : '/welcome.jsp',
??????scripts : true
?????}
????},
????width : '100%',
????height : '100%'
???});
?center1.setActiveTab(Ext.getCmp('default'));// 设置默认页面为欢迎界面
?getTree(left, center1, "users/navigationAction.action");
?// 在TabPanel中添加选项卡
?function addTab() {
??alert("sdsdsdsds");
??center1.add({
?????title : 'New Tab ' + (++index),
?????iconCls : 'tabs',
?????html : 'Tab Body ' + (index) + '<br/><br/>',
?????closable : true
????}).show();
?};
?Ext.create('Ext.container.Viewport', {
??layout : 'border',
??renderTo : Ext.getBody(),
??items : [top, left, bottom, right, center1]
?});
?/*
? * 左侧面板添加导航信息
? */
?function getTree(com, center, url) {
??// 左侧面板添加子控件之前先刷新一下
??com.on('beforeadd', function() {
?????try {
??????com.doLayout();
?????} catch (e) {
??????alert(e.name + "==== " + e.message);
?????}
????});
??// 通过AJAX动态添加导航栏菜单（TreePanel数组）
??var data;
??var items;
??Ext.Ajax.request({
???url : url,
???async : true,// true为异步调教数据，false为同步提交数据
???success : function(response) {
????data = response.responseText.substr(0,
??????(response.responseText.length - 2));
????items = Ext.JSON.decode(data);// 解析后台json
????// 数据，将json内容转换为Ext的Tree组建
????try {
?????com.removeAll();// 添加之前先清空左侧面板上的所有组件
?????for (var i = 0; i < items.length; i++) {
??????com.add(items[i]);
??????// 添加鼠标单击树节点事件
??????Ext.getCmp('tree' + (i + 1)).addListener('itemclick',
????????function(view, record, item, index, e) {
?????????var url1 = record.raw.url;
?????????var id = this.getStateId() + index;// id如果没有定义，则自动生成一个唯一的ID
?????????var p = center.getComponent(id);// 获取节点ID
?????????// 对应的标签面板
?????????if (url1) {
??????????if (p) {
???????????// 如果已经存在，则激活
???????????center.setActiveTab(p);
??????????} else {
???????????// 如果不存在，则创建新的并激活
???????????p = Ext.create('Ext.panel.Panel', {
????????????title : record.raw.text,
????????????width : '100%',
????????????height : 800,
????????????html : '<iframe id="iframe'
??????????????+ id
??????????????+ '" name="iframe'
??????????????+ id
??????????????+ '" src="'
??????????????+ url1
??????????????+ '" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>',
????????????// autoLoad : {
????????????listeners : {
?????????????activate : function(p) {
??????????????window.frames["iframe"
????????????????+ p.id].location
????????????????.reload();
?????????????}
????????????},
????????????closable : true,// 标签上出现关闭按钮
????????????id : id
?????????????// 这里一定要设置id
???????????});
???????????center.add(p);
???????????center.setActiveTab(p);
??????????}
?????????}
????????});
??????// 禁止浏览器右键菜单
??????Ext.getDoc().on('contextmenu', function(e) {
?????????e.stopEvent();
????????});
?????}; // for循环结尾处
?????com.doLayout();
????} catch (e) {
?????alert(e.name + " -- " + e.message);
????}
???},
???failure : function(response, options) {
????var data1 = response.responseText.substr(0,
??????(response.responseText.trim().length - 2));
????alert(data1);
???}
??});
??// 更新左栏菜单完成后，清除原来右栏主界面的内容
??if (isCenterClear) {
???center.removeAll();
??}
??isCenterClear = true;
?};
});
