how can i change a panel border width in ext js 3.4?

Question

how do i change a panel border width? in ext 3.4 api border is a boolean.

My code

var p = new Ext.Panel({
    title  : 'My Panel',       
    width  :400,
    border : true //default also true.

});

how can i edit border width for example 2px or 3px??

Answer 1

Use CSS, Ext will account for it when calculating the component size and laying it out.

First, put a custom CSS class on your panel:

var p = new Ext.Panel({
    title: 'My Panel',       
    width:400,
    border: true //default also true.

    ,cls: 'my-panel'
});

Then style it:

.x-panel.my-panel {
    border: 5px solid red;
}