Question

I want to create a panel with rounded edges. I have images for round edges mainly top left, top right, bottom left, bottom right. I also have a center image which I can spread across the panel using CSS background-repeat property. I could not find any straight forward way to do this so I chose to extend the Ext.Panel class and create my own with just the look-n-feel change. The approach I chose was to create a table with 3 rows and 3 columns. 1st row will contain place holders for top left, top and top right images, 2nd row will contain center area where all the children of this panel will get added and 3rd row will contain place holders for bottom left, bottom and bottom right images. Below is the code for my Panel.

Ext.namespace("Ext.nDisks");
Ext.nDisks.RoundedPanel = Ext.extend(Ext.Panel, {
       // Rounded Panel code.
       autoEl: {
           tag: 'table', cls: 'rounded-panel-table',
               children: [
                   {tag:'tr', id:'row0', children:[
                           {tag: 'td', id:'col00', cls:'ptl'},
                           {tag: 'td', id:'col01',cls:'pt'},
                           {tag: 'td', id:'col02',cls:'ptr'}
                   ]},
                   {tag:'tr', id:'row1', children:[
                           {tag: 'td', id:'col10', cls:'center', colspan:'3'}
                   ]},
                   {tag:'tr', id:'row2', children:[
                           {tag: 'td', id:'col20', cls:'pbl'},
                           {tag: 'td', id:'col21', cls:'pb'},
                           {tag: 'td', id:'col22', cls:'pbr'}
                   ]}
               ]},
       constructor: function(config) {
           Ext.nDisks.RoundedPanel.superclass.constructor.call(this, config);
       }
   }
);

I have couple of problems with this implementation.

1. When I instantiate this class like var roundedPanel = new Ext.myns.RoundedPanel(); it creates a table element assigning it the generated id(which is what it should do) but within the table, it creates a div element along with tbody. How do I get rid of this unnecessary div element.
2. When I add any component to RoundedPanel it does not add to the table, but gets added to the generated div element. How do I get new element added to the 2nd row of the table which is the main container area.

Answer 1

Figured out the way to do it. In the config of Ext.Panel, enable the flag frame. This inserts a table in dom which has its on CSS. Now override the CSS for top left, top right etc with custom images to get a custom rounded edged panel.