How to make the rounded corners for panel

[barbara1712]

I want to make the rounded corners for my simple panel.

I have tried with using frame : true.

But I want the bigger rounded corners

Ext.onReady(function() {
 var myPanel = new Ext.Panel({ 
  title : 'List',
  id : 'mypanel', 
  frame : true,
  width : 300,
  style: 'margin:10px 50px',
  html : 'This is my Panel'
  
 });
 myPanel.render(document.body);
 
});

Please help me

[barbara1712]

can anyone help me please

[Animal]

If you want them more rounded than that, then you will have to provide the images.

[Condor]

You can use:

baseCls: 'x-box'

or

baseCls: 'x-box-blue'

but x-box doesn't support a header!

[barbara1712]

Thanks,
baseCls: 'x-box'
worked but you are right it doesn't support header.
is there any other solution as animal suggested...

I don't know how to implement it.
please help me

[Condor]

Have a look at the stylesheet for x-panel, x-box, x-box-blue and x-window related rules.

If you create your own images and css rules you can style a panel anyway you want to.

[aityahia]

hello
it's dont work for me with x-box, the panel is rendred with no border.

Ext.onReady(function(){
    var p = new Ext.Panel({ 
 
  id : 'mypanel', 
  frame : true,
  width : 300,
  height:300,
  style: 'margin:10px 50px',
  html : 'This is my Panel',
  baseCls: 'x-box'
  
 });

});

i want to have a similaire panel thay one in right side of API Documentation home page.

[aityahia]

it's work now i have removed the title proprety

[rahesh]

Hi

When i gave panel baseCls:'x-box' it worked for me.But the buttons that are added to th panel is not displaying now.

Anybody please help...

Thanks in advance..


Regards
Rahesh

[ajmas]

I realise this is an old post, but since it comes up in searches, I thought I would share another approach using CSS3:

Define a style for 'x-panel-header' and use the border-radius attribute. You will of course need to provide the variations needed for each known rendering engine (along with the standard version), otherwise it will be ignored. For example for Firefox:

-moz-border-radius: 10px 10px 0 0;

Note the variations are simply prefixed with "-o-", "-webkit-", etc. though worth checking in each of your targeted browsers. BTW this won't work in older browsers, such as IE6.