PDA

View Full Version : Customization of background color of panel.



pajelawrence
2 Sep 2010, 7:54 PM
Hello everyone,

I need help regarding to color or design customization of my panel.
I have a question. It's possible to customize my panel background color like I want?:)


Regards,

Lawrence

evant
2 Sep 2010, 8:25 PM
new Ext.Panel({
fullscreen: true,
cls: 'foo'
});




.foo .x-panel-body{
background-color: #f00;
}

pajelawrence
2 Sep 2010, 8:37 PM
Thanks again Evant,

How about if the background image is from json object. It is possible to load into data.JsonStore
then assigned to style: background-image: url('json_field')?


Best Regards,

Lawrence

evant
2 Sep 2010, 9:06 PM
Assuming the panel is rendered:



myVar = .... something;
panel.body.setStyle('background-image', myVar);

pajelawrence
6 Sep 2010, 9:26 PM
The panel background is not working., The panel was rendered then
I assigned a value in the myVar variable which is a link of image. "http://sample/sample_image.jpg".

evant
6 Sep 2010, 9:58 PM
Works fine for me.



Ext.setup({
onReady: function(){
var p = new Ext.Panel({
fullscreen: true
});
var img = 'url(http://www.sencha.com/assets/images/logo-sencha-sm.png)';
p.body.setStyle('background-image', img);
}
});

pajelawrence
6 Sep 2010, 10:49 PM
Thanks, How about if the image is not constant, I mean the image is dynamically supply from the server. Because
each user has their own image background that is from the database.
Can you please give me an example to get the data from database using data.JsonStore, then
it will decode so that it read the data to be assigned to

var img = 'url(json)';
p.body.setStyle('background-image', img);



Thanks

evant
6 Sep 2010, 10:50 PM
There's plenty of examples on the forum for reading data from a remote server.

pajelawrence
6 Sep 2010, 11:39 PM
I get the json object using ajax instead of jsonstore, Ajax more applicable with my problem it's now working.
Thanks anyway...


Ext.Ajax.request({
url: 'wallpaper.php',
success: function(response, opts) {
var decoded = Ext.decode(response.responseText);
var img = decoded.wallpaper[0].mywallpaper;
var bg = 'url('+ img +')';
tabPanel.body.setStyle('background-image', bg);
}
})

dmitry.sh
6 Sep 2010, 11:52 PM
Hi to all

I am tried set ui: 'dark' property for FormPanel yesterday and it has no effect. Do Sencha have predefined set of styles for FormPanel or i can set only full-customized styles for my panels(using self-writed css)?

Thanks

pajelawrence
6 Sep 2010, 11:54 PM
did you used this CSS? ext-touch.css

dmitry.sh
7 Sep 2010, 12:02 AM
Yes, of course. And i use 0.9.3 version of Sencha Touch.
But i see only light version of form anyway (as in form example).