如何在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中創建圓角邊緣面板

回答

相關問題