添加元素爲輪轉煎茶

Question

在煎茶觸摸，我宣佈一個像這樣的旋轉木馬：

ajaxNav = new Ext.Panel({  
    scroll: 'vertical', 
    cls: 'card1 demo-data', 
    styleHtmlContent: true, 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    defaults: { 
     flex: 1 
    }, 
    items: [{ 
     xtype: 'carousel', 
     items: [{ 
      id:'tab-1', 
      html: '', 
      cls: 'card card1' 
     }, 
     { 
      id:'tab-2', 
      html: '<p>Clicking on either side of the indicators below</p>', 
      cls: 'card card2' 
     }, 
     { 
      id:'tab-3', 
      html: 'Card #3', 
      cls: 'card card3' 
     }] 
    }] 
}); 

有誰知道如何dinamycally添加元素？

Answer 1

我給你寫一個簡單的例子，告訴你如何在現有的Ext.Carousel元素中添加一個新面板。

Ext.setup({ 

onReady: function() { 

    var ajaxNav = new Ext.Carousel({  
     fullscreen: true, 
     dockedItems: { 
      xtype: 'toolbar', 
      title: 'Demo', 
      items: [{ 
       xtype: 'button', 
       ui: 'action', 
       text: 'Add', 
       handler: function(){ 

        var element = new Ext.Panel({ 
         html: 'New Element' 
        }); 

        ajaxNav.add(element); 
        ajaxNav.doLayout(); 

       } 
      }] 
     }, 
     items: [{ 
      id:'tab-1', 
      html: '', 
      cls: 'card card1' 
     },{ 
      id:'tab-2', 
      html: '<p>Clicking on either side of the indicators below</p>', 
      cls: 'card card2' 
     },{ 
      id:'tab-3', 
      html: 'Card #3', 
      cls: 'card card3' 
     }] 
    }); 

} 

}）;

正如您所看到的，在「添加」按鈕事件中，您首先必須根據您的需要定義面板，然後將其添加到您的旋轉木馬，並且，最重要的是，您必須讓旋轉木馬重新計算他​​的佈局，調用「doLayout（）」函數。

希望這會有所幫助。