动画效果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