Question

I have the following code:

var win = new Ext.Window({
width:200,
height:200, 
autoScroll: true,
closable: false,
border: false,
shadow: true,
draggable: false
});

win.show();

And I want to use css styles to set the width and height, look the follwoing code:
Code:

var win = new Ext.Window({   
cls: 'test-class',
autoScroll: true,
closable: false,
border: false,
shadow: true,
draggable: false
});

win.show();

css style class:

.test-class {
 height:200px; 
 width:200px;
 background:blue;
 }​

But the height and width are not set, instead the background yes.

Can you let me know how can I set the width and height through css style classes?
I am using ExtJs. 4.0.

Thank you in advance.

Answer 1

Ext is setting the height inline, which overrides your CSS.

You can either add !important to your CSS properties, which will force them to override the inline style, or explicitly set a size in the config when you create the Ext window, like in your first block of code.