PDA

View Full Version : set window background image



mohaskuar
19 Feb 2013, 4:45 AM
hellow i wanted to but my logo as a background to my window or my login form is it possible,i coudnt find any helpfull doc..... or is it possible to make a window tottally transparent.?

sword-it
19 Feb 2013, 5:11 AM
Hi Mohaskuar,

Yuo can use bodyStyle config of the window class, like-



Ext.create('Ext.window.Window', {
title: 'Hello',
height: 200,
width: 400,
bodyStyle: 'background:url('image.png') no-repeat; padding:10px;',
layout: 'fit',
}).show();


http://docs.sencha.com/ext-js/4-1/#!/api/Ext.window.Window-cfg-bodyStyle

mohaskuar
19 Feb 2013, 6:52 AM
i appriciate your help but my problem doesnt still persists..... the image is not displayed and window only with white body..... using firefox 9 and crome.

droessner
19 Feb 2013, 9:02 AM
The solution sword-it provided works if there are no items in the window. However, if you were to put a panel in that window, the background would change back to white since the panel body background color defaults to white. I assume that something like this is the case for you? Any component that you put into the window would have to be defined with a transparent background so that the window background is visible.

scottmartin
19 Feb 2013, 10:50 AM
Please provide what you have in place so far and a screen detailing the problem so we can have a closer look.

Have you tried using CSS approach?



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




// CSS version
Ext.create('Ext.panel.Panel', {
//title: 'My Panel',
renderTo: Ext.getBody(),
cls: 'mybackground',
height:320,
width:300,
items: [{
xtype: 'textfield',
fieldLabel: 'Field'
},
{
xtype: 'textfield',
fieldLabel: 'Field'
}]
});


Scott.

mohaskuar
20 Feb 2013, 12:55 AM
10ks all, scots method works for me ,but that only change the body part of the window,what can i do to make the the window part where title is placed....transparent or hav a background image like windows body.

sword-it
20 Feb 2013, 11:09 PM
you can use CSS overrides for your window to make it transparent.

add a custom class to your window like cls:'myWindow' and try following:-

.myWindow . x-window-default{background:rgba(0, 0, 0, 0)}
.myWindow . x-window-header{background:rgba(0, 0, 0, 0)}

Output:-
41975