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) {
               <span style="color:#FF0000;"> self.setBodyStyle('backgroundColor : #BFBFBF');
                //self.setBodyStyle("background", "-ms-linear-gradient(top,#BFBFBF 0%, #BFBFBF 100%)");//渐变</span>
            }
            else
            if (!isIE8 && !isIE9 ) {<span style="color:#FF0000;">
</span><pre name="code" class="javascript">                self.setBodyStyle('backgroundColor : #BFBFBF');

                //self.setBodyStyle("background", "-ms-linear-gradient(top,#BFBFBF 0%, #BFBFBF 100%)"); //渐变
          <span style="color:#000000;"> }
            else {</span>
<pre name="code" class="javascript"><pre name="code" class="javascript">                self.setBodyStyle('backgroundColor : #BFBFBF');
<pre name="code" class="javascript">                //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) {
<pre name="code" class="javascript"><span style="color:#FF0000;"></span><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript">                   <span style="color:#FF0000;"> mainbody.setBodyStyle('backgroundColor : #6699FF');
</span>

<span style="color:#FF0000;">                    //mainbody.setBodyStyle("background", "-ms-linear-gradient(top,#6699FF 0%, #6699FF 100%)");//渐变</span>

 } else if (!isIE) {  //mainbody.setStyle("background", "-webkit-linear-gradient(top,#6699FF 0%, #6699FF 100%)");//渐变

<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><span style="color:#FF0000;">                    mainbody.setBodyStyle('backgroundColor : #6699FF');
</span>

                    mainbody.setStyle("height", "34px"); } else { mainbody.setBodyStyle("background", "none");

<span style="color:#FF0000;">                    mainbody.setBodyStyle("filter", "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#6699FF',endColorStr='#6699FF',gradientType='0')");//渐变                 </span>
                }
        },
        scope: this
    },
    title: '<p style="text-align: center; margin:3px;padding: 0px; font-size: 1.2em; color:#FFFFFF">导航栏</p>',
    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) {
               <span style="color:#FF0000;"> //self.setBodyStyle("background", "-ms-linear-gradient(top,#BFBFBF 0%, #BFBFBF  100%)");//渐变</span>
<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><span style="color:#FF0000;">                self.setBodyStyle('backgroundColor : #BFBFBF');</span>

 } else if (!isIE8 && !isIE9) {

<pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><pre name="code" class="javascript"><span style="color:#FF0000;">                self.setBodyStyle('backgroundColor : #BFBFBF');</span>

                <span style="color:#FF0000;">//self.setBodyStyle("background", "-webkit-linear-gradient(top,#BFBFBF 0%, #BFBFBF 100%)");//渐变</span>
            }
            else {
               <span style="color:#FF0000;"> self.setBodyStyle("filter", "progid:DXImageTransform.Microsoft.Gradient(startColorStr='#3892D3',endColorStr='#004B8C',gradientType='0')");</span>
            }
        }
    },
    html: '<p style="text-align: center; margin:3px;padding: 0px; font-size: 0.9em; color:#FFFFFF">extjs + MVC + Spring.NET example</p>',
    region: 'south',
    height: 20
});