1

スライドインしたいこのビューがあります：

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);
    }
});

これをスライドアップ/スライドダウンなどでアニメーション化するにはどうすればよいですか? たくさんのものを試しましたが、何もうまくいかないようです。

すべての助けに感謝します！

4

1 に答える 1

4

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

于 2013-02-13T05:55:38.723 に答える