PDA

View Full Version : Container background image



driley
13 Feb 2013, 11:54 AM
I am new to Ext JS and have a fairly simple issue. I am trying to place a background image on a container using the css file but for some reason this is not working. Can you place a background image on a container or should I create a panel within the container and place the background image and all the other code in the container in the panel?

Thanks in advance!

scottmartin
13 Feb 2013, 2:54 PM
Here are several options:



Ext.onReady(function(){
Ext.tip.QuickTipManager.init();

Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(),
width: 200,
height: 200,
items: [{
type: "image",
src: "http://www.sencha.com/img/apple-touch-icon.png",
width: 200,
height: 200
}]
});

});

Ext.create('Ext.panel.Panel', {
//title: 'My Panel',
renderTo: Ext.getBody(),
bodyStyle: "background-image:url(http://www.sencha.com/img/apple-touch-icon.png) !important",
height:300,
width:300
});


Scott.

driley
13 Feb 2013, 3:04 PM
Scott, thank you for your response.
I have read multiple threads that state that using the css file is the best way to do it, was I mislead?
Also, I understand how the second option is placing the background image during the initialization of the panel. But what is the first option doing?

Thanks again!

scottmartin
13 Feb 2013, 3:16 PM
You could use something like this:



.mybackground .x-panel-body{
background: #FFFFFF url(http://www.sencha.com/img/apple-touch-icon.png) !important;
padding: 0 5px 0 16px !important;
}




Ext.create('Ext.panel.Panel', {
//title: 'My Panel',
renderTo: Ext.getBody(),
cls: 'mybackground',
height:320,
width:300
});



The 2nd option is just a draw component.

Scott.

mice-pace
13 Feb 2013, 5:28 PM
Note the usage of ' !important;' at the end of scott's CSS, wether it's being applied as a style or a class, Sencha's styling takes great care to not get messed up by being accidently overwritten... Applying the style alone is rarely enough, you need to take pains to basically show ExtJs that this style is a deliberate change to one of their component's, not just a stylesheet somewhere else on the page that happens to use the same name.

' !important;' when you use it, let's the browser know to override the existing styling. Without it, the styling is seen, but ignored by the browser

driley
14 Feb 2013, 6:25 AM
Thank you both for your answers, they have helped me out greatly.
But we have somewhat diverged from my initial issue, and that is dealing with containers. I have tried to use the provided css code on my container but to no avail. Maybe some actual code will help:

Ext.define('BYO.view.GroupPicker', {
extend: 'Ext.container.Container',
alias: 'widget.groupPicker',


cls: 'group-selector-view',
height: 500,
width: 990,
autoScroll: false,

...
}
CSS:

.group-selector-view {
position: relative;
background: url(/gator_resources/images/grey_background.jpg) !important;
padding: 0 5px 0 16px !important;
}

Thanks again and sorry for noobness.

scottmartin
14 Feb 2013, 6:43 AM
Container is missing body* configs. It is base meant for other components ... less overhead.

Scott.

driley
14 Feb 2013, 6:52 AM
Okay, so if I'm understanding this correctly, a background image cannot be put on a container because it is a more basic data structure. I should place a panel in my container and place all my container code on the panel, correct?

scottmartin
14 Feb 2013, 7:18 AM
I guess this depends on your requirement .. if the container is going to contain other items that would not be in the panel .. but if you just want a panel that has a background with some controls, then there is no need for the container at all .. as the panel itself would be the container.

Scott.