extjs - 如何使用卡片布局获得动画

Question

我正在为我的向导类型应用程序使用卡片布局。单击下一个和上一个按钮时如何实现动画效果。

var navigate = function(panel, direction){
     var layout = panel.getLayout();
    layout[direction]();
    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
    Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
Ext.create('Ext.panel.Panel', {
    title: 'Example Wizard',
    width: 300,
    height: 200,
    layout: {type: 'card'   ,
            animation: {
                type: 'slide',
            }},
    bodyStyle: 'padding:15px',
    defaults: {
        border: false
    },
    bbar: [
        {
            id: 'move-prev',
            text: 'Back',
            handler: function(btn) {
                navigate(btn.up("panel"), "prev");
            },
            disabled: true
        },
        '->',
        {
            id: 'move-next',
            text: 'Next',
            handler: function(btn) {
                navigate(btn.up("panel"), "next");
            }
        }
    ],
    items: [{
        id: 'card-0',
        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
    },{
        id: 'card-1',
        html: '<p>Step 2 of 3</p>'
    },{
        id: 'card-2',
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    }],
    renderTo: Ext.getBody()
});

Answer 1

我能够通过覆盖 setActiveItem 来实现动画淡出卡片布局的方法。您可以在此处查看示例的操作:http://jsfiddle.net/q7Ytj/4/ .

只需在应用程序初始化步骤中执行此操作:

Ext.override(Ext.layout.container.Card, {
    setActiveItem: function (newCard) {
        var me = this,
            owner = me.owner,
            oldCard = me.activeItem,
            rendered = owner.rendered,
            newIndex;

        newCard = me.parseActiveItem(newCard);
        newIndex = owner.items.indexOf(newCard);

        // If the card is not a child of the owner, then add it.
        // Without doing a layout!
        if (newIndex === -1) {
            newIndex = owner.items.items.length;
            Ext.suspendLayouts();
            newCard = owner.add(newCard);
            Ext.resumeLayouts();
        }

        // Is this a valid, different card?
        if (newCard && oldCard !== newCard) {
            // Fire the beforeactivate and beforedeactivate events on the cards
            if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
                return false;
            }
            if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
                return false;
            }

            if (rendered) {
                Ext.suspendLayouts();

                // If the card has not been rendered yet, now is the time to do so.
                if (!newCard.rendered) {
                    me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
                }

                var handleNewCard = function () {
                    // Make sure the new card is shown
                    if (newCard.hidden) {
                        newCard.show();
                    }

                    if (!newCard.tab) {
                        var newCardEl = newCard.getEl();
                        newCardEl.dom.style.opacity = 1;
                        if (newCardEl.isStyle('display', 'none')) {
                            newCardEl.setDisplayed('');
                        } else {
                            newCardEl.show();
                        }
                    }

                    // Layout needs activeItem to be correct, so set it if the show has not been vetoed
                    if (!newCard.hidden) {
                        me.activeItem = newCard;
                    }
                    Ext.resumeLayouts(true);
                };

                var handleOldCard = function () {
                    if (me.hideInactive) {
                        oldCard.hide();
                        oldCard.hiddenByLayout = true;
                    }
                    oldCard.fireEvent('deactivate', oldCard, newCard);
                };

                if (oldCard && !newCard.tab) {
                    var oldCardEl = oldCard.getEl();
                    oldCardEl.fadeOut({
                        callback: function () {
                            handleOldCard();
                            handleNewCard();
                        }
                    });

                } else if (oldCard) {
                    handleOldCard();
                    handleNewCard();
                } else {
                    handleNewCard();
                }

            } else {
                me.activeItem = newCard;
            }

            newCard.fireEvent('activate', newCard, oldCard);

            return me.activeItem;
        }
        return false;
    }
});