View Full Version : Make window back ground transparent and remove header ?

10 Jun 2013, 6:06 AM
Hi ,
How do i Make window back ground transparent and remove header ?
i tried 'header : false' but couldnt succeceed and for background of window tried
bodyStyle: 'background:transparent;',but colour is blue and not transparent

.Can u send me link to set some styling color for window --any links? ..

Thanks in advance

10 Jun 2013, 9:28 PM

bodyStyle: "background-color: transparent !important;"

10 Jun 2013, 10:27 PM
Thanks songle that worked for background color of window, but i also want to make header of window , borders transparent as well.

10 Jun 2013, 10:30 PM
Are you sure you want a panel then? What functionality do you want the componet to have?

Perhaps try a simplier componet. Maybe just a box.

10 Jun 2013, 10:35 PM
I have a slider , that i place it in a panel and the panel is placed in window , i position window based on 'x' and 'y' configs of window . When somebody sees it he should be able to see just slider rest all should be transparent

10 Jun 2013, 11:09 PM
Sounds like you don't need the middle panel. A window IS a panel (check the component heirachy) so you can just add the slider to the window.

Given you are using absolute positioning you can even just create the slider and then show it where you want without the window OR the panel then nothing needs to be transparent because there is nothing extra to show. See Ext.slider.Single.ShowAt()

11 Jun 2013, 12:08 AM
The window doesn't just contain a slider , it also has 2 buttons as well, so i added 2 buttons and slider to a panel and then that panel to window , when user sees he must just be able to see 2 buttons and slider rest all must be transparent . Window has positioning configs 'x' and 'y', panel doesn't have that's why i added in this fashion because i want them to be in some position


11 Jun 2013, 12:18 AM
It's a slightly wierd UI but OK.
Remove the middle panel. It is not needed and is in the way.

Set the window to
bodyStyle: "background-color: transparent !important;"
border: false,
closable: false

and see what you get.

If I'm way off the mark can you add a mockup of what you want?

11 Jun 2013, 9:14 PM
The window component has the framing pretty well baked into the widget, so you may have a hard time eliminating that aspect. But, you might consider making your panel floating and showing it at the x/y you want. I was just on the formpanel API docs page and modified the example at the top a little demonstrate the possibility (though you'll still need to drop the border and header and make the body transparent still):

Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
floating: true,
shadow: false,
hidden: true,

// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false

// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function() {
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}).showAt(60, 10);