javascript - Animating Ext.Panel in Sencha touch 2 -

javascript - Animating Ext.Panel in Sencha touch 2 -

i have view want slide in:

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 height of content this.getscrollable().getscroller().scrolltoend(); } });

it rendered controller:

ext.define('gs.controller.showmodal', { extend : 'ext.app.controller', config : { command : { 'button[action="showbidmodal"]' : { tap : 'showmodal' }, } }, showmodal : function() { var addbidpanel = ext.create('gs.view.addbidview'); ext.viewport.add(addbidpanel); } });

how can animate slide up/slide downwards or similar? tried bunch of stuff nil seems work.

all help appreciated!

one way hide modal default:

hidden: true

then can apply showanimation , hideanimation show , hide modal specified animation, example:

showanimation: { type: 'slidein', duration: 1000, direction: 'down' }, hideanimation: { type: 'slideout', duration: 1000, direction: 'up' },

here working fiddle: http://www.senchafiddle.com/#6tn6b

javascript extjs sencha-touch sencha-touch-2