下面是整个页面的组成部件:
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
});