如何在ExtJS 2.1中创建圆角边缘面板

我想创建一个圆角边缘的面板。我有圆形边缘的图像，主要是左上角，右上角，左下角，右下角。我也有一个中心图像，我可以使用CSS background-repeat属性在面板上传播。我找不到任何直接的方法来做到这一点，所以我选择扩展Ext.Panel课程，并创建自己的只是看看感觉的变化。我选择的方法是创建一个3行3列的表格。第一行将包含左上角，右上角和右上角图像的占位符，第二行将包含此面板中所有孩子将添加的中心区域，第三行将包含左下角，右下角和右下角图像的占位符。以下是我的面板的代码。如何在ExtJS 2.1中创建圆角边缘面板

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); 
     } 
    } 
);

我对这个实现有几个问题。

当我实例化这个类像var roundedPanel = new Ext.myns.RoundedPanel();它创建了一个table元素分配给它的生成的ID（这是它应该做的），但在表中，它创建了tbody沿div元素。我如何摆脱这个不必要的div元素。
当我向RoundedPanel添加任何组件时，它不会添加到表中，但会被添加到生成的div元素中。如何将新元素添加到作为主容器区域的表格的第二行。

来源

2011-03-16 Tushar Tarkas

想通这样做。在Ext.Panel的配置中，启用标志frame。这会在dom中插入一个具有CSS的表格。现在使用自定义图像覆盖左上角，右上角等的CSS以获得自定义的圆边面板。

来源

2011-04-18 06:21:07

如何在ExtJS 2.1中创建圆角边缘面板

回答

相关问题