extjs 5 sliderCard布局

参考很久前一个布局做的，SLIDERCARD布局，左右上下斜划动切换当前的CONTAINER中的内容。

 

/**
 * extjs slide card layout
 *
 *
 * @author <a href='mailto:xiaomingyang@aksl.com.cn'>xiaomingyang</a> 2016-01-29，16:16
 * @version v0.1
 * @since 5.0
 */
Ext.define('Ext.layout.container.SlideCard', {

    extend: 'Ext.layout.container.Fit',
    alternateClassName: 'Ext.layout.SlideCardLayout',
    alias: 'layout.slidecard',

    type: 'slidecard',
    hideInactive: true,

    deferredRender: false,
    getRenderTree: function() {
        var me = this,
            activeItem = me.getActiveItem();
        if (activeItem) {

            if (activeItem.hasListeners.beforeactivate && activeItem.fireEvent('beforeactivate', activeItem) === false) {



                activeItem = me.activeItem = me.owner.activeItem = null;
            }

            else if (activeItem.hasListeners.activate) {
                activeItem.on({
                    boxready: function() {
                        activeItem.fireEvent('activate', activeItem);
                    },
                    single: true
                });
            }
            if (me.deferredRender) {
                if (activeItem) {
                    return me.getItemsRenderTree([
                        activeItem
                    ]);
                }
            } else {
                return me.callParent(arguments);
            }
        }
    },
    renderChildren: function() {
        var me = this,
            active = me.getActiveItem();
        if (!me.deferredRender) {
            me.callParent();
        } else if (active) {

            me.renderItems([
                active
            ], me.getRenderTarget());
        }
    },
    isValidParent: function(item, target, position) {


        var itemEl = item.el ? item.el.dom : Ext.getDom(item);
        return (itemEl && itemEl.parentNode === (target.dom || target)) || false;
    },

    getActiveItem: function() {
        var me = this,




            item = me.activeItem === undefined ? (me.owner && me.owner.activeItem) : me.activeItem,
            result = me.parseActiveItem(item);

        if (result && me.owner.items.indexOf(result) !== -1) {
            me.activeItem = result;
        }



        return result == null ? null : (me.activeItem || me.owner.activeItem);
    },

    parseActiveItem: function(item) {
        var activeItem;
        if (item && item.isComponent) {
            activeItem = item;
        } else if (typeof item === 'number' || item === undefined) {
            activeItem = this.getLayoutItems()[item || 0];
        } else if (item === null) {
            activeItem = null;
        } else {
            activeItem = this.owner.getComponent(item);
        }
        return activeItem;
    },


    configureItem: function(item) {
        item.setHiddenState(item !== this.getActiveItem());
        this.callParent(arguments);
    },
    onRemove: function(component) {
        this.callParent([
            component
        ]);
        if (component === this.activeItem) {


            this.activeItem = undefined;
        }
    },

    getAnimation: function(newCard, owner) {
        var newAnim = (newCard || {}).cardSwitchAnimation;
        if (newAnim === false) {
            return false;
        }
        return newAnim || owner.cardSwitchAnimation;
    },

    getNext: function() {
        var wrap = arguments[0],
            items = this.getLayoutItems(),
            index = Ext.Array.indexOf(items, this.activeItem);
        return items[index + 1] || (wrap ? items[0] : false);
    },

    next: function() {
        var anim = arguments[0],
            wrap = arguments[1];
        return this.setActiveItem(this.getNext(wrap), anim);
    },

    getPrev: function() {
        var wrap = arguments[0],
            items = this.getLayoutItems(),
            index = Ext.Array.indexOf(items, this.activeItem);
        return items[index - 1] || (wrap ? items[items.length - 1] : false);
    },

    prev: function() {
        var anim = arguments[0],
            wrap = arguments[1];
        return this.setActiveItem(this.getPrev(wrap), anim);
    },

    setActiveItem: function(newCard) {
        var me = this,
            owner = me.owner,
            oldCard = me.activeItem,
            rendered = owner.rendered,
            newIndex, focusNewCard;
        newCard = me.parseActiveItem(newCard);
        newIndex = owner.items.indexOf(newCard);


        if (newIndex === -1) {
            newIndex = owner.items.items.length;
            Ext.suspendLayouts();
            newCard = owner.add(newCard);
            Ext.resumeLayouts();
        }

        if (newCard && oldCard !== newCard) {

            if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
                return false;
            }
            if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
                return false;
            }
            if (rendered) {
                Ext.suspendLayouts();

                if (!newCard.rendered) {
                    me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
                }
                if (oldCard) {
                    if (me.hideInactive) {
                        focusNewCard = oldCard.el.contains(Ext.Element.getActiveElement());
                        oldCard.hide();
                        if (oldCard.hidden) {
                            oldCard.hiddenByLayout = true;
                            oldCard.fireEvent('deactivate', oldCard, newCard);
                        } else
                        {
                            return false;
                        }
                    }
                }

                if (newCard.hidden) {
                    newCard.show();
                }


                if (newCard.hidden) {
                    me.activeItem = newCard = null;
                } else {
                    me.activeItem = newCard;




                    if (focusNewCard) {
                        if (!newCard.defaultFocus) {
                            newCard.defaultFocus = ':focusable';
                        }
                        newCard.focus();
                    }
                }
                Ext.resumeLayouts(true);
            } else {
                me.activeItem = newCard;
            }
            newCard.fireEvent('activate', newCard, oldCard);
            return me.activeItem;
        }
        return false;
    },

    /**
     * tl左上角( 默认) t上居中 tr右上角
     * l左边界的中央 c居中
     * r右边界的中央 bl左下角 b下居中 br右下角
     *
     * @param item
     * @param direct
     * @param callback
     * @param scope
     * @param options
     */
    slideActive : function(item, direct, callback, scope, options) {
        var me = this, ai = this.activeItem,
            ct = this.container;
        item = me.parseActiveItem(item);
        var redrect = direct;
        if (scope === 0) {
            scope = item;
        }
        if (item && ai != item) {
            var l = this;
            var  callbackF = function() {
                var layout = item.doLayout && (l.layoutOnCardChange || !item.rendered);
                l.activeItem = item;
                delete item.deferLayout;
                item.show();
                //if (item.slidouted) {
                //    item.el.slideIn('l', {//将元素从视图滑出并伴随着渐隐
                //        easing : 'ease',
                //        duration : 800,
                //        remove : false
                //    });
                //}
                l.layout();
                ct.doLayout();
                if (layout) {
                    item.doLayout();
                }
                item.fireEvent('activate', item);
                if (callback) {
                    callback.apply(scope,options);
                }
            };
            if (ai) {
                ai.el.slideOut(direct, {//将元素从视图滑出并伴随着渐隐
                    easing : 'ease',
                    duration : 500,
                    remove : false,
                    callback : function(){
                        ai.slidouted = true;
                        ai.hide();
                        callbackF();
                    }
                });
            }else{
                callbackF();
            }
        }
    }
});

 ===================================================

Ext.apply(this, {
            items: [{
                border : false,
                frame : false,
                layout : 'fit',
                bodyStyle:'padding:2px',
                items : [{
                    id : 'role-card-containner',
                    border : false,
                    activeItem: 0,
                    layout : 'slidecard',
                    items : [this._roleGrid, this._roleAddForm, this._roleViewForm]
                }]
            }]
        });

 ==========================================================

切换卡片

 /**
     * 添加角色
     *
     * @private
     */
    _addRoleItem : function() {
        var currentActiveItem = Ext.getCmp('role-card-containner').getLayout().getActiveItem();
        var activeIndex = currentActiveItem.id.substr(this._comp_id_prefix.length);
        var nextIndex = eval(activeIndex) + 1;
        Ext.getCmp('role-card-containner').getLayout().slideActive(nextIndex, 'l');
    },