動畫效果Ext.Panel在煎茶觸摸2

Question

我有這樣的觀點，我想在下滑：

Ext.define('GS.view.AddBidView', { 
extend: 'Ext.Panel', 
    config: { 
     xtype: 'panel', 
     modal: true, 
     width: '100%', 
     height: '50%', 
     bottom: '0%', 
     hideOnMaskTap: true, 
     items: [{ 
      xtype: 'textareafield', 
      name: 'bio',   
      clearIcon: false, 
      id: 'textarea', 
      placeHolder: 'Ange ditt bud här...' 
     }, 
     { 
      xtype:'button', 
      text: 'Lägg bud', 
      docked:'bottom', 
      maxWidth: '95%', 
      minHeight: '45px', 
      cls: 'saveBidBtn' 
     }] 
    }, 
    initialize: function() { 
     this.down('#textarea').on('keyup', this.grow, this); 
     this.textarea = this.element.down('textarea'); 
     this.textarea.dom.style['overflow'] = 'hidden'; 
    }, 

    grow: function() { 
     this.textarea.setHeight(this.textarea.dom.scrollHeight); // scrollHeight is height of all the content 
     this.getScrollable().getScroller().scrollToEnd(); 
    } 
}); 

它是由該控制器呈現：

Ext.define('GS.controller.ShowModal', { 
    extend : 'Ext.app.Controller',  
    config : { 
     control : { 
      'button[action="showBidModal"]' : { 
       tap : 'showModal' 
      }, 
     } 
    }, 
    showModal : function() { 
     var addBidPanel = Ext.create('GS.view.AddBidView'); 
     Ext.Viewport.add(addBidPanel); 
    } 
}); 

我怎麼能這樣的動畫用向上滑動/向下滑動還是類似？試了一堆東西，但似乎沒有任何工作。

所有幫助表示讚賞！

Answer 1

一種方式是默認隱藏模式：

hidden: true 

那麼你可以申請showAnimation和hideAnimation到show和hide你的模式與特定動畫，例如：

showAnimation: { 
    type: 'slideIn', 
    duration: 1000, 
    direction: 'down' 
}, 

hideAnimation: { 
    type: 'slideOut', 
    duration: 1000, 
    direction: 'up' 
}, 

這裏一個工作小提琴：http://www.senchafiddle.com/#6tN6b