ExtJs教程----如何改变各个区域的背景色

下面是整个页面的组成部件:

Ext.define('ExtJS5Example.view.portal.BodyPanel', {
    extend: 'Ext.container.Container',
    layout: 'border',
    style: 'background-color:white',
    items: [{
        xtype: 'portalHeader'
    }, {
        xtype: 'portalMenuPanel'
    }, {
        xtype: 'portalMainPanel'
    }, {
        xtype: 'portalFooter'
    },{
        region: 'east',
        items: [

        ]
    }]
});

图片中区域1的背景色修改:(红色标志的代码)

var ua = navigator.userAgent.toLowerCase();
var check = function (r) {
    return r.test(ua);
}; 
var isIEF = function () { //ie?  
    if (!!window.ActiveXObject || "ActiveXObject" in window)
        return true;
    else
        return false;
};
Ext.define('ExtJS5Example.view.portal.Header', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.portalHeader',
    region: 'north',
    height: 65,
    layout: 'border',
    listeners: {
        afterrender: function () {
            var self = this;
            var isOpera = check(/opera/);
            var isIE = !isOpera && check(/msie/);
            var isIE8 = isIE && check(/msie 8/);
            var isIE9 = isIE && check(/msie 9/);
            var isIE10 = isIE && check(/msie 10/);
            var isIE11 = isIEF() && !check(/msie/);
            if (isIE11||isIE10) {
                self.setBodyStyle('backgroundColor : #BFBFBF');
                //self.setBodyStyle("background", "-ms-linear-gradient(top,#BFBFBF 0%, #BFBFBF 100%)");//渐变
            }
            else
            if (!isIE8 && !isIE9 ) {
                self.setBodyStyle('backgroundColor : #BFBFBF');
 
  
                //self.setBodyStyle("background", "-ms-linear-gradient(top,#BFBFBF 0%, #BFBFBF 100%)"); //渐变
           }
            else {
                self.setBodyStyle('backgroundColor : #BFBFBF');
                //self.setBodyStyle("background", "-ms-linear-gradient(top,#BFBFBF 0%, #BFBFBF 100%)");//渐变
 
   } } }, items: [ //...... ], initComponent: function () { this.tpl = Ext.create('Ext.Template', this.tplMarkup); this.bodyStyle = { }; this.callParent();}}); 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
图片中区域2的背景色修改:
 
  
步骤一:在ext的包中找到文件:~\ext\packages\ext-theme-neptune\build\resourcesext-theme-neptune-all_01.css
 
  
步骤二:在文件中找出所有的x-tab-bar-default类，修改其css样式
 
  

 
  
图片中区域3的背景色修改:(使用红色区域的代码)
 
  
Ext.define('ExtJS5Example.view.portal.MenuPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.portalMenuPanel',
    bodyStyle: {
        backgroundColor: 'white',
        backgroundImage: 'none'
    },
    listeners: {
        render: function (c) {
            var self = this;
            var mainbody = Ext.ComponentQuery.query('portalMenuPanel')[0];
            var pheader = Ext.ComponentQuery.query('portalMenuPanel')[0].getHeader();
            var isOpera = check(/opera/);
            var isIE = !isOpera && check(/msie/);
            var isIE8 = isIE && check(/msie 8/);
            var isIE9 = isIE && check(/msie 9/);
            var isIE10 = isIE && check(/msie 10/);
            var isIE11 = isIEF() && !check(/msie/);
            if (isIE11) {
                    mainbody.setBodyStyle('backgroundColor : #6699FF');
 
  
 
  
 
  
 
  
 
  
                    //mainbody.setBodyStyle("background", "-ms-linear-gradient(top,#6699FF 0%, #6699FF 100%)");//渐变
  } else if (!isIE) { 
   //mainbody.setStyle("background", "-webkit-linear-gradient(top,#6699FF 0%, #6699FF 100%)");//渐变
 
  
                    mainbody.setBodyStyle('backgroundColor : #6699FF');
 
  
 
  
 
  
 
  
 
                      mainbody.setStyle("height", "34px"); } else { 
  mainbody.setBodyStyle("background", "none");
 
  
                    mainbody.setBodyStyle("filter", "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#6699FF',endColorStr='#6699FF',gradientType='0')");//渐变                 
                }
        },
        scope: this
    },
    title: '
导航栏
',
    region: 'west',
    split: true,
    width: 248,
    minWidth: 150,
    maxWidth: 400,
    collapsible: true,
    collapseMode: 'mini',
    split: false,
    margins: '2 0 0 5',
    layout: 'border',
    items: [{
        xtype: 'portalMenuTree',
        height: '100%'
    }]

}); 

 
  
 
  
 
  
 
  
 图片中区域4的背景色修改:(红色标志的代码) 
  
 
  
Ext.define('ExtJS5Example.view.portal.Footer', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.portalFooter',
    listeners: {
        afterrender: function () {
            var self = this;

            var isOpera = check(/opera/);
            var isIE = !isOpera && check(/msie/);
            var isIE8 = isIE && check(/msie 8/);
            var isIE9 = isIE && check(/msie 9/);
            var isIE10 = isIE && check(/msie 10/);
            var isIE11 = isIEF() && !check(/msie/);
            if (isIE11 || isIE10) {
                //self.setBodyStyle("background", "-ms-linear-gradient(top,#BFBFBF 0%, #BFBFBF  100%)");//渐变
                self.setBodyStyle('backgroundColor : #BFBFBF');
 
  
 
  
 
  
 
  
 
  
 
  
  } else if (!isIE8 && !isIE9) { 
  
                self.setBodyStyle('backgroundColor : #BFBFBF');
 
  
 
  
 
  
 
  
 
  
 
  
 
  
                //self.setBodyStyle("background", "-webkit-linear-gradient(top,#BFBFBF 0%, #BFBFBF 100%)");//渐变
            }
            else {
                self.setBodyStyle("filter", "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#3892D3',endColorStr='#004B8C',gradientType='0')");
            }
        }
    },
    html: '
extjs + MVC + Spring.NET example
',
    region: 'south',
    height: 20
});