PDA

View Full Version : How retain background for a container and all its contained components?



simonr25
9 Jul 2013, 11:41 AM
Hello,

version of Extjs 4 used: 4.2.0

I have a container (panel) which has a background image defined in the style config (header-image.jpg). The
panel contains several components (including containers and panels) - below only shows 3.
The background image is overwritten with 'white' color (which I believe - having looked at firebug - comes from one of the extjs classes).

Please can you inform me how can I retain the background image ?


app.js


Ext.Loader.setConfig({enabled:true});

Ext.define('My.view.ReportHeader', {
extend: 'Ext.panel.Panel',
alias: 'widget.ReportHeader',
layout: 'hbox',
height: '50px',
style: "padding-top:10; padding-bottom:10; background:url(header-image.jpg);",

items:[{
xtype: 'container',
layout: 'hbox',
flex: 1,
align: 'center',

items:[{
xtype: 'image',
src:'logo.png'
},
{
html: 'title',
width: 200,
margin: '11 20 0 20',
bodyStyle: 'color: blue; font-size:14; border:0'

}
]
},
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'end'
},
flex: 1,
items:[
{
xtype: 'button',
cls: 'helpbtn',
text: 'Help',
margin: '11 20 0 20'
}
]
}
]
});


Ext.define('My.view.ReportPage', {
extend: 'Ext.panel.Panel',
alias: 'widget.ReportPage',
layout: 'border',
renderTo: Ext.getBody(),
items: [{
xtype: 'ReportHeader',
region: 'north'
},
{
xtype: 'panel',
region: 'center'
}
]
});


Ext.define('My.view.Viewport', {
extend:'Ext.container.Viewport',

layout: 'card',
id:'card-1',
activeItem:0,
items:[
{
xtype:'ReportPage'
}
]

});

Ext.define('My.controller.Contact', {
extend: 'Ext.app.Controller',
views: ['Viewport','ReportPage'],

init: function () {

this.control({
'#card-1' : {
render: this.onMainReady
},
});

},

onMainReady: function () {
console.log('started');
}
});


Ext.application({
name: 'My',
controllers: ['Contact'],
launch: function () {

Ext.QuickTips.init();
My.app = this;
vp = Ext.create('My.view.Viewport', {});

}
});



index.html


<html>
<head>
<title>Report</title>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-gray.css">
<style type="text/css">
...
</style>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="app_hdr.js"></script>
</head>
<body></body>


kiind regrds,
S

slemmon
11 Jul 2013, 12:48 PM
Instead of 'style' you might use bodyStyle:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-bodyStyle

You might also need to in bodyStyle set the 'background-color' to transparent - been a while since I overrode that so drawing from memory.