Question

我想创建一个圆边的面板。我的圆边图像主要是左上角，右上角，左下角，右下角。我还有一个中心图像，我可以使用CSS background-repeat属性在面板上传播。我找不到任何直接的方法来做这个，所以我选择扩展Ext.Panel类并创建我自己的只有看起来感觉变化。我选择的方法是创建一个包含3行和3列的表。第一行将包含左上图，上图和右上图像的占位符，第二行将包含中心区域，此面板的所有子项将被添加，第三行将包含左下，右下和右下图像的占位符。以下是我的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);
       }
   }
);

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

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

Answer 1

想出办法。在Ext.Panel的配置中，启用标志frame。这将在dom中插入一个表格，其中包含CSS。现在使用自定义图像覆盖左上角，右上角的CSS以获得自定义的圆角边框。

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

1 个答案: