Animate（滑入）新面板替換當前面板的內容？

Question

我正在嘗試更改Ext.List的內容。我試圖將內容更改爲新面板，但我不需要更多列表元素。

這似乎取代了內容，但我該如何動畫變化？

onItemDisclosure: function(record, btn, index) { 
    console.log('Disclose more info for ' + record.get('name')); 
    var panel1 = Ext.getCmp('panel-1'); 
    panel1.remove(Ext.getCmp('panel-1')); 
    panel1.add(Ext.getCmp('panel-2')); 
    panel1.doLayout(); 
} 

Answer 1

最好是具有panel-1和panel-2如在不同的面板中的項目，然後在它們之間切換。例如：

var detailPanel = new Ext.Panel({ 
      fullscreen: true, 
      id:'detailPanel', 
      scroll:'vertical', 
      tpl:'<h1>{text}</h1>' 
    }); 

    var list = new Ext.List({ 
     id :'theList', 
     itemTpl : '{firstName} {lastName}', 
     store: store1, 
     width: '100%', 
     scroll:false 
    }); 

    var panel = new Ext.Panel({ 
     fullscreen: true, 
     id:'thePanel', 
     layout: 'card', 
     cardSwitchAnimation:'slide', 
     scroll:'vertical', 
     items:[list, detailPanel] 
    }); 

然後，您可以像這樣更新detailPanel，並切換到它。 Ext.getCmp('thePanel').setActiveItem(1,{type:'slide',direction:'left'});

setActiveItem的第二個參數是動畫配置。目的。 http://dev.sencha.com/deploy/touch/docs/?class=Ext.Panel