sencha touch 扩展官方NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮(2014-5-15)

扩展视频讲解：http://www.cnblogs.com/mlzs/p/3652094.html
官方NavigationView详解：http://www.cnblogs.com/mlzs/p/3550011.html
官方Container详解：http://www.cnblogs.com/mlzs/p/3548720.html

示例源码参见：https://bitbucket.org/moLangZaiShi/demo
注：扩展源码以示例为准

扩展源码：

Ext.define('ux.navigation.View', {
    extend: 'Ext.Container',
    alternateClassName: 'ux.NavigationView',
    xtype: 'uxNavigationView',
    requires: ['ux.navigation.Bar'],

    config: {
        baseCls: Ext.baseCSSPrefix + 'navigationview',
        navigationBar: {
            docked: 'top',
            cls: 'navigationBar'
        },
        defaultBackButtonText: 'Back',
        useTitleForBackButtonText: false,
        layout: {
            type: 'card',
            animation: {
                duration: 300,
                easing: 'ease-out',
                type: 'slide',
                direction: 'left'
            }
        },
        index: null,
        //不推荐使用
        menu: null
    },

    platformConfig: [{
        theme: ['Blackberry'],
        navigationBar: {
            splitNavigation: true
        }
    }],

    // @private
    initialize: function () {
        var me = this,
        navBar = me.getNavigationBar();

        //监听导航栏返回按钮
        if (navBar) {
            navBar.on({
                back: me.onBackButtonTap,
                scope: me
            });

            me.relayEvents(navBar, 'rightbuttontap');

            me.relayEvents(me, {
                add: 'push',
                remove: 'pop'
            });
        }
        //<debug>
        var layout = me.getLayout();
        if (layout && !layout.isCard) {
            Ext.Logger.error('The base layout for a NavigationView must always be a Card Layout');
        }
        //</debug>
    },

    /**
     * @private
     */
    applyLayout: function (config) {
        config = config || {};

        return config;
    },
    //更新标题
    setTitle: function (text) {
        var me = this,
        nav = me.getNavigationBar();
        nav.setTitle(text);
        nav.backButtonStack[nav.backButtonStack.length - 1].title = text;
    },
    /*创建其他导航栏*/
    applyMenu: function (newItem) {
        if (!newItem) {
            return false;
        }
        var me = this;
        return me.factoryItem(newItem);
    },
    /*更新其他导航栏*/
    updateMenu: function (newItem, oldItem) {
        if (oldItem) {
            //console.log('oldItem:', oldItem.getItemId());
            this.remove(oldItem);
        }
        if (newItem) {
            //console.log('newItem:', newItem.getItemId());
            this.add(newItem);
        }
    },
    //更新index
    updateIndex: function (newItem, oldItem) {
        var me = this,
        animation = this.getLayout().getAnimation(),
        event = {
            scope: me,
            animationend: 'clearItem'
        };
        //添加监听
        if (oldItem) {
            //移除动画结束监听
            animation.un(event);
        }
        if (Ext.isNumber(newItem)) {
            //添加动画结束监听
            animation.on(event);
        }
    },
    //根据index清理多余的项
    clearItem: function () {
        var me = this,
        innerItems = me.getInnerItems(),
        length = innerItems.length,
        index = me.getIndex();
        count = length - index - 1;
        toRemove = innerItems.splice(me.getIndex(), count);
        //移除子项
        for (i = 0; i < toRemove.length; i++) {
            me.remove(toRemove[i]);
        }
    },
    /**
     * @private
     * 点击返回按钮
     */
    onBackButtonTap: function () {
        this.pop();
        this.fireEvent('back', this);
    },

    push: function (xtype, params) {
        var me = this,
        view = me.down('#' + xtype);
        if (!view) {
            params = params || {};
            params.itemId = xtype;
            view = Ext.create(xtype, params);
            me.add(view);
        } else if (view != me.getActiveItem()) {
            me.pop(xtype);
        }
        return view;
    },
    /*移除当前激活项然后添加新的项xtype为null则只移除*/
    popAndPush: function (xtype, params) {
        this.pop(null, xtype);
        if (xtype) {
            this.push(xtype, params);
        }
    },
    /**
      * 不填写参数时，移除当前项，返回到上一项
      * 如果参数是数字，则从最后一项开始移除指定数目的项
      * 如果参数是string,则移除指定类型的项
      * 如果参数是项，则移除传入的项
      * 不论参数如何，都会保留一个活动项
      * @return {Ext.Component} 当前活动项
      */
    pop: function (count, hide) {
        if (this.beforePop(count)) {
            return this.doPop(hide);
        }
    },

    /*删除指定项*/
    beforePop: function (count) {
        var me = this,
        innerItems = me.getInnerItems();
        if (Ext.isString(count) || Ext.isObject(count)) {
            var last = innerItems.length - 1,
            i;

            for (i = last; i >= 0; i--) {
                if ((Ext.isString(count) && Ext.ComponentQuery.is(innerItems[i], count)) || (Ext.isObject(count) && count == innerItems[i])) {
                    count = last - i;
                    break;
                }
            }

            if (!Ext.isNumber(count)) {
                return false;
            }
        }

        var ln = innerItems.length,
        toRemove;
        //default to 1 pop
        if (!Ext.isNumber(count) || count < 1) {
            count = 1;
        }

        //check if we are trying to remove more items than we have
        count = Math.min(count, ln - 1);

        if (count) {
            //we need to reset the backButtonStack in the navigation bar
            me.getNavigationBar().beforePop(count);

            //get the items we need to remove from the view and remove theme
            toRemove = innerItems.splice(-count, count - 1);
            for (i = 0; i < toRemove.length; i++) {
                this.remove(toRemove[i]);
            }

            return true;
        }

        return false;
    },

    /**
     * @private
     */
    doPop: function (hide) {
        var me = this,
        innerItems = this.getInnerItems(),
        item = innerItems[innerItems.length - 1];
        if (hide) {
            item.hide();
        }
        //set the new active item to be the new last item of the stack
        me.remove(item);

        // Hide the backButton
        if (innerItems.length < 3 && this.$backButton) {
            this.$backButton.hide();
        }

        // Update the title container
        if (this.$titleContainer) {
            //<debug>
            if (!this.$titleContainer.setTitle) {
                Ext.Logger.error('You have selected to display a title in a component that does not 
                    support titles in NavigationView. Please remove the `title` configuration from your 
                    NavigationView item, or change it to a component that has a `setTitle` method.');
            }
            //</debug>
            var item = innerItems[innerItems.length - 2];
            this.$titleContainer.setTitle((item.getTitle) ? item.getTitle() : item.config.title);
        }

        return this.getActiveItem();
    },

    /**
     * 返回上一项
     * @return {Mixed} The previous view
     */
    getPreviousItem: function () {
        var innerItems = this.getInnerItems();
        return innerItems[innerItems.length - 2];
    },

    /**
     * Updates the backbutton text accordingly in the {@link #navigationBar}
     * @private
     */
    updateUseTitleForBackButtonText: function (useTitleForBackButtonText) {
        var navigationBar = this.getNavigationBar();
        if (navigationBar) {
            navigationBar.setUseTitleForBackButtonText(useTitleForBackButtonText);
        }
    },

    /**
     * Updates the backbutton text accordingly in the {@link #navigationBar}
     * @private
     */
    updateDefaultBackButtonText: function (defaultBackButtonText) {
        var navigationBar = this.getNavigationBar();
        if (navigationBar) {
            navigationBar.setDefaultBackButtonText(defaultBackButtonText);
        }
    },

    // @private
    applyNavigationBar: function (config) {
        if (!config) {
            config = {
                hidden: true,
                docked: 'top'
            };
        }

        if (config.title) {
            delete config.title;
            //<debug>
            Ext.Logger.warn("Ext.navigation.View: The 'navigationBar' configuration does not accept a 'title' property. You " + "set the title of the navigationBar by giving this navigation view's children a 'title' property.");
            //</debug>
        }

        config.view = this;
        config.useTitleForBackButtonText = this.getUseTitleForBackButtonText();
        //是否分离导航按钮和标题栏
        if (config.splitNavigation) {
            this.$titleContainer = this.add({
                docked: 'top',
                xtype: 'titlebar',
                ui: 'light',
                title: this.$currentTitle || ''
            });

            var containerConfig = (config.splitNavigation === true) ? {} : config.splitNavigation;

            this.$backButtonContainer = this.add(Ext.apply({
                xtype: 'toolbar',
                docked: 'bottom'
            },
            containerConfig));

            this.$backButton = this.$backButtonContainer.add({
                xtype: 'button',
                text: 'Back',
                hidden: true,
                ui: 'back'
            });

            this.$backButton.on({
                scope: this,
                tap: this.onBackButtonTap
            });

            config = {
                hidden: true,
                docked: 'top'
            };
        }

        return Ext.factory(config, ux.navigation.Bar, this.getNavigationBar());
    },

    // @private
    updateNavigationBar: function (newNavigationBar, oldNavigationBar) {
        if (oldNavigationBar) {
            this.remove(oldNavigationBar, true);
        }

        if (newNavigationBar) {
            this.add(newNavigationBar);
        }
    },

    /**
     * @private
     */
    applyActiveItem: function (activeItem, currentActiveItem) {
        var me = this,
        innerItems = me.getInnerItems();

        // 确保项目已初始化
        me.getItems();

        // 如果没有初始化, 将最后的子项激活
        if (!me.initialized) {
            activeItem = innerItems.length - 1;
        }
        //console.log(this.getItems().keys);
        return this.callParent([activeItem, currentActiveItem]);
    },
    /*pop时反转切换动画*/
    doResetActiveItem: function (innerIndex) {
        var me = this,
        innerItems = me.getInnerItems(),
        animation = me.getLayout().getAnimation();

        if (innerIndex > 0) {
            if (animation && animation.isAnimation) {
                animation.setReverse(true);
            }
            me.setActiveItem(innerIndex - 1);
            me.getNavigationBar().onViewRemove(me, innerItems[innerIndex], innerIndex);
        }
    },

    /**
     * 移除子项，调用remove方法后自动执行
     * @private
     */
    doRemove: function () {
        var animation = this.getLayout().getAnimation();

        if (animation && animation.isAnimation) {
            animation.setReverse(false);
        }

        this.callParent(arguments);
    },

    onActivate: function (view) {
        //更新menu
        this.setMenu((view.getMenu) ? view.getMenu() : view.config.Menu);
    },
    /**
     * 添加子项，调用add方法后自动执行
     * @private
     */
    onItemAdd: function (item, index) {

        // 检测title配置
        if (item && item.getDocked() && item.config.title === true) {
            this.$titleContainer = item;
        }
        if (item.isInnerItem()) {
            //添加监听,监听视图激活事件
            item.on({
                scope: this,
                activate: 'onActivate'
            });
        }
        this.doItemLayoutAdd(item, index);

        var navigaitonBar = this.getInitialConfig().navigationBar;

        if (!this.isItemsInitializing && item.isInnerItem()) {

            this.setActiveItem(item);
            // 更新navigationBar
            if (navigaitonBar) {
                //强制排序
                this.setIndex((item.getIndex) ? item.getIndex() : item.config.index);

                this.getNavigationBar().onViewAdd(this, item, index);
            }

            // 更新返回按钮
            if (this.$backButtonContainer) {
                this.$backButton.show();
            }
        }

        if (item && item.isInnerItem()) {
            // 更新标题
            //console.log('更新标题', item);
            this.updateTitleContainerTitle((item.getTitle) ? item.getTitle() : item.config.title);
        }

        if (this.initialized) {
            this.fireEvent('add', this, item, index);
        }
    },

    /**
     * @private
     * 更新titleContainer的标题，如果存在
     */
    updateTitleContainerTitle: function (title) {
        if (this.$titleContainer) {
            //<debug>
            if (!this.$titleContainer.setTitle) {
                Ext.Logger.error('You have selected to display a title in a component that does not 
                    support titles in NavigationView. Please remove the `title` configuration from your 
                    NavigationView item, or change it to a component that has a `setTitle` method.');
            }
            //</debug>
            this.$titleContainer.setTitle(title);
        } else {
            this.$currentTitle = title;
        }
    },

    /**
     * 移除第一项和最后项之间的所有项（包括最后项）
     * @return {Ext.Component} The view that is now active
     */
    reset: function () {
        return this.pop(this.getInnerItems().length);
    }
});

/**
 * This component is used in {@link Ext.navigation.View} to control animations in the toolbar. You should never need to
 * interact with the component directly, unless you are subclassing it.
 * @private
 * @author Robert Dougan <rob@sencha.com>
 */
Ext.define('ux.navigation.Bar', {
    extend: 'Ext.TitleBar',

    requires: ['Ext.Button', 'Ext.Spacer'],

    // @private
    isToolbar: true,

    config: {
        /**
         * @cfg
         * @inheritdoc
         */
        baseCls: Ext.baseCSSPrefix + 'toolbar',
        /**
         * @cfg {String} ui
         * Style options for Toolbar. Either 'light' or 'dark'.
         * @accessor
         */
        ui: 'dark',

        /**
         * @cfg {String} title
         * The title of the toolbar. You should NEVER set this, it is used internally. You set the title of the
         * navigation bar by giving a navigation views children a title configuration.
         * @private
         * @accessor
         */
        title: null,

        /**
         * @cfg
         * @hide
         * @accessor
         */
        defaultType: 'button',

        /**
         * @cfg
         * @ignore
         * @accessor
         */
        layout: {
            type: 'hbox'
        },

        /**
         * @cfg {Array/Object} items The child items to add to this NavigationBar. The {@link #cfg-defaultType} of
         * a NavigationBar is {@link Ext.Button}, so you do not need to specify an `xtype` if you are adding
         * buttons.
         *
         * You can also give items a `align` configuration which will align the item to the `left` or `right` of
         * the NavigationBar.
         * @hide
         * @accessor
         */

        /**
         * @cfg {String} defaultBackButtonText
         * The text to be displayed on the back button if:
         * a) The previous view does not have a title
         * b) The {@link #useTitleForBackButtonText} configuration is true.
         * @private
         * @accessor
         */
        defaultBackButtonText: '返回',

        /**
         * @cfg {Object} animation
         * @private
         * @accessor
         */
        animation: {
            duration: 300
        },

        /**
         * @cfg {Boolean} useTitleForBackButtonText
         * Set to false if you always want to display the {@link #defaultBackButtonText} as the text
         * on the back button. True if you want to use the previous views title.
         * @private
         * @accessor
         */
        useTitleForBackButtonText: null,

        /**
         * @cfg {Ext.navigation.View} view A reference to the navigation view this bar is linked to.
         * @private
         * @accessor
         */
        view: null,

        /**
         * @cfg {Boolean} androidAnimation Optionally enable CSS transforms on Android 2
         * for NavigationBar animations.  Note that this may cause flickering if the
         * NavigationBar is hidden.
         * @accessor
         */
        android2Transforms: false,

        /**
         * @cfg {Ext.Button/Object} backButton The configuration for the back button
         * @private
         * @accessor
         */
        backButton: {
            align: 'left',
            ui: 'back',
            hidden: true
        },
        /*导航栏临时控件组，在子项中配置*/
        tmpItems: null,
        /*导航栏临时cls，在子项中配置*/
        tmpCls: null,
        /*是否隐藏返回按钮，在子项中配置*/
        backHide: true
    },

    platformConfig: [{
        theme: ['Blackberry'],
        animation: false
    }],

    /**
     * @event back
     * Fires when the back button was tapped.
     * @param {Ext.navigation.Bar} this This bar
     */

    constructor: function (config) {
        config = config || {};

        if (!config.items) {
            config.items = [];
        }

        this.backButtonStack = [];
        this.activeAnimations = [];

        this.callParent([config]);
    },
    /*创建导航栏临时控件组*/
    applyTmpItems: function (newItems) {
        if (!newItems) return false;
        var me = this,
        navItems = [],
        i,
        ln;
        newItems = Ext.Array.from(newItems);
        for (i = 0, ln = newItems.length; i < ln; i++) {
            var item = newItems[i],
            fire = item.fire,
            btn = me.factoryItem(item);
            if (fire) {
                btn.on({
                    tap: 'onTmpItemTap',
                    scope: me
                });
            }
            navItems.push(me.factoryItem(btn));
        }
        return navItems;
    },
    //临时控件被点击时
    onTmpItemTap: function (t) {
        var me = this,
        view = me.getView().getActiveItem(),
        fire = t.fire;
        view.fireAction(fire, [me, view, t], 'do' + fire);
    },
    /*更新导航栏临时控件组*/
    updateTmpItems: function (newItem, oldItem) {
        if (oldItem) {
            var i, ln;
            for (i = 0, ln = oldItem.length; i < ln; i++) {
                this.remove(oldItem[i]);
            }
        }
        if (newItem) {
            this.add(newItem);
        }
    },
    /*更新导航栏临时cls*/
    updateTmpCls: function (newItem, oldItem) {
        if (oldItem) {
            this.removeCls(oldItem);
        }
        if (newItem) {
            this.addCls(newItem);
        }
    },
    /**
     * @private
     */
    applyBackButton: function (config) {
        return Ext.factory(config, Ext.Button, this.getBackButton());
    },

    /**
     * @private
     */
    updateBackButton: function (newBackButton, oldBackButton) {
        if (oldBackButton) {
            this.remove(oldBackButton);
        }

        if (newBackButton) {
            this.add(newBackButton);

            newBackButton.on({
                scope: this,
                tap: this.onBackButtonTap
            });
        }
    },

    onBackButtonTap: function () {
        this.fireEvent('back', this);
    },

    /**
     * @private
     */
    updateView: function (newView) {
        var me = this,
        backButton = me.getBackButton(),
        innerItems,
        i,
        backButtonText,
        item,
        title,
        titleText,
        bar;

        me.getItems();

        if (newView) {
            //update the back button stack with the current inner items of the view
            innerItems = newView.getInnerItems();
            for (i = 0; i < innerItems.length; i++) {
                item = innerItems[i];
                title = (item.getTitle) ? item.getTitle() : item.config.title;
                bar = (item.getBar) ? item.getBar() : item.config.bar;

                me.backButtonStack.push({
                    title: title || '&nbsp;',
                    bar: bar
                });
            }
            titleText = me.getTitleText();

            if (titleText === undefined) {
                titleText = '';
            }

            me.setTitle(titleText);

            backButtonText = me.getBackButtonText();
            if (backButtonText) {
                backButton.setText(backButtonText);
                backButton.show();
            }
            //更新bar
            me.updateBar();
        }
    },

    /**
     * @private
     */
    onViewAdd: function (view, item) {
        var me = this,
        backButtonStack = me.backButtonStack,
        hasPrevious, title, bar;

        me.endAnimation();

        title = (item.getTitle) ? item.getTitle() : item.config.title;
        bar = (item.getBar) ? item.getBar() : item.config.bar;
        //移除额外的历史记录
        var index = (item.getIndex) ? item.getIndex() : item.config.index;
        if (Ext.isNumber(index)) {
            var length = view.getInnerItems().length,
            count = length - index;
            me.beforePop(count);
        }
        backButtonStack.push({
            title: title || '&nbsp;',
            bar: bar
        });

        hasPrevious = backButtonStack.length > 1;
        me.doChangeView(view, hasPrevious, false);
    },

    /**
     * @private
     */
    onViewRemove: function (view) {
        var me = this,
        backButtonStack = me.backButtonStack,
        hasPrevious;

        me.endAnimation();
        backButtonStack.pop();
        hasPrevious = backButtonStack.length > 1;

        me.doChangeView(view, hasPrevious, true);
    },

    /**
     * @private
     */
    doChangeView: function (view, hasPrevious, reverse) {
        var me = this,
        leftBox = me.leftBox,
        leftBoxElement = leftBox.element,
        titleComponent = me.titleComponent,
        titleElement = titleComponent.element,
        backButton = me.getBackButton(),
        titleText = me.getTitleText(),
        backButtonText = me.getBackButtonText(),
        animation = me.getAnimation() && view.getLayout().getAnimation(),
        animated = animation && animation.isAnimation && view.isPainted(),
        properties,
        leftGhost,
        titleGhost,
        leftProps,
        titleProps;

        if (animated) {
            leftGhost = me.createProxy(leftBox.element);
            leftBoxElement.setStyle('opacity', '0');
            backButton.setText(backButtonText);
            backButton[hasPrevious ? 'show' : 'hide']();

            titleGhost = me.createProxy(titleComponent.element.getParent());
            titleElement.setStyle('opacity', '0');
            me.setTitle(titleText);

            properties = me.measureView(leftGhost, titleGhost, reverse);
            leftProps = properties.left;
            titleProps = properties.title;

            me.isAnimating = true;
            me.animate(leftBoxElement, leftProps.element);
            me.animate(titleElement, titleProps.element,
            function () {
                titleElement.setLeft(properties.titleLeft);
                me.isAnimating = false;
                me.refreshTitlePosition();
            });

            if (Ext.browser.is.AndroidStock2 && !this.getAndroid2Transforms()) {
                leftGhost.ghost.destroy();
                titleGhost.ghost.destroy();
            } else {
                me.animate(leftGhost.ghost, leftProps.ghost);
                me.animate(titleGhost.ghost, titleProps.ghost,
                function () {
                    leftGhost.ghost.destroy();
                    titleGhost.ghost.destroy();
                });
            }

        } else {
            if (hasPrevious) {
                backButton.setText(backButtonText);
                backButton.show();
            } else {
                backButton.hide();
            }
            me.setTitle(titleText);
        }
        me.updateBar();
    },
    //更新bar
    updateBar: function () {
        //更新其他
        var bar = this.getBar() || {};
        //设置导航栏临时控件组
        this.setTmpItems(bar.items);
        //设置导航栏临时cls
        this.setTmpCls(bar.cls);
        //更新返回按钮状态
        if (bar.backHide) {
            backButton.hide();
        }
    },
    /**
     * Calculates and returns the position values needed for the back button when you are pushing a title.
     * @private
     */
    measureView: function (oldLeft, oldTitle, reverse) {
        var me = this,
        barElement = me.element,
        newLeftElement = me.leftBox.element,
        titleElement = me.titleComponent.element,
        minOffset = Math.min(barElement.getWidth() / 3, 200),
        newLeftWidth = newLeftElement.getWidth(),
        barX = barElement.getX(),
        barWidth = barElement.getWidth(),
        titleX = titleElement.getX(),
        titleLeft = titleElement.getLeft(),
        titleWidth = titleElement.getWidth(),
        oldLeftX = oldLeft.x,
        oldLeftWidth = oldLeft.width,
        oldLeftLeft = oldLeft.left,
        useLeft = Ext.browser.is.AndroidStock2 && !this.getAndroid2Transforms(),
        newOffset,
        oldOffset,
        leftAnims,
        titleAnims,
        omega,
        theta;

        theta = barX - oldLeftX - oldLeftWidth;
        if (reverse) {
            newOffset = theta;
            oldOffset = Math.min(titleX - oldLeftWidth, minOffset);
        } else {
            oldOffset = theta;
            newOffset = Math.min(titleX - barX, minOffset);
        }

        if (useLeft) {
            leftAnims = {
                element: {
                    from: {
                        left: newOffset,
                        opacity: 1
                    },
                    to: {
                        left: 0,
                        opacity: 1
                    }
                }
            };
        } else {
            leftAnims = {
                element: {
                    from: {
                        transform: {
                            translateX: newOffset
                        },
                        opacity: 0
                    },
                    to: {
                        transform: {
                            translateX: 0
                        },
                        opacity: 1
                    }
                },
                ghost: {
                    to: {
                        transform: {
                            translateX: oldOffset
                        },
                        opacity: 0
                    }
                }
            };
        }

        theta = barX - titleX + newLeftWidth;
        if ((oldLeftLeft + titleWidth) > titleX) {
            omega = barX - titleX - titleWidth;
        }

        if (reverse) {
            titleElement.setLeft(0);

            oldOffset = barX + barWidth - titleX - titleWidth;

            if (omega !== undefined) {
                newOffset = omega;
            } else {
                newOffset = theta;
            }
        } else {
            newOffset = barX + barWidth - titleX - titleWidth;

            if (omega !== undefined) {
                oldOffset = omega;
            } else {
                oldOffset = theta;
            }

            newOffset = Math.max(titleLeft, newOffset);
        }

        if (useLeft) {
            titleAnims = {
                element: {
                    from: {
                        left: newOffset,
                        opacity: 1
                    },
                    to: {
                        left: titleLeft,
                        opacity: 1
                    }
                }
            };
        } else {
            titleAnims = {
                element: {
                    from: {
                        transform: {
                            translateX: newOffset
                        },
                        opacity: 0
                    },
                    to: {
                        transform: {
                            translateX: titleLeft
                        },
                        opacity: 1
                    }
                },
                ghost: {
                    to: {
                        transform: {
                            translateX: oldOffset
                        },
                        opacity: 0
                    }
                }
            };
        }

        return {
            left: leftAnims,
            title: titleAnims,
            titleLeft: titleLeft
        };
    },

    /**
     * Helper method used to animate elements.
     * You pass it an element, objects for the from and to positions an option onEnd callback called when the animation is over.
     * Normally this method is passed configurations returned from the methods such as #measureTitle(true) etc.
     * It is called from the #pushLeftBoxAnimated, #pushTitleAnimated, #popBackButtonAnimated and #popTitleAnimated
     * methods.
     *
     * If the current device is Android, it will use top/left to animate.
     * If it is anything else, it will use transform.
     * @private
     */
    animate: function (element, config, callback) {
        var me = this,
        animation;

        //reset the left of the element
        element.setLeft(0);

        config = Ext.apply(config, {
            element: element,
            easing: 'ease-in-out',
            duration: me.getAnimation().duration || 250,
            preserveEndState: true
        });

        animation = new Ext.fx.Animation(config);
        animation.on('animationend',
        function () {
            if (callback) {
                callback.call(me);
            }
        },
        me);

        Ext.Animator.run(animation);
        me.activeAnimations.push(animation);
    },

    endAnimation: function () {
        var activeAnimations = this.activeAnimations,
        animation, i, ln;

        if (activeAnimations) {
            ln = activeAnimations.length;
            for (i = 0; i < ln; i++) {
                animation = activeAnimations[i];
                if (animation.isAnimating) {
                    animation.stopAnimation();
                } else {
                    animation.destroy();
                }
            }
            this.activeAnimations = [];
        }
    },

    refreshTitlePosition: function () {
        if (!this.isAnimating) {
            this.callParent();
        }
    },

    /**
     * Returns the text needed for the current back button at anytime.
     * @private
     */
    getBackButtonText: function () {
        var text = this.backButtonStack[this.backButtonStack.length - 2],
        useTitleForBackButtonText = this.getUseTitleForBackButtonText();

        if (!useTitleForBackButtonText) {
            if (text) {
                text = this.getDefaultBackButtonText();
            }
        }

        return text;
    },

    /**
     * Returns the text needed for the current title at anytime.
     * @private
     */
    getTitleText: function () {
        if (this.backButtonStack.length == 0) {
            return '';
        }
        return this.backButtonStack[this.backButtonStack.length - 1].title;
    },
    getBar: function () {
        if (this.backButtonStack.length == 0) {
            return false;
        }
        return this.backButtonStack[this.backButtonStack.length - 1].bar;
    },
    /**
     * Handles removing back button stacks from this bar
     * @private
     */
    beforePop: function (count) {
        count--;
        for (var i = 0; i < count; i++) {
            this.backButtonStack.pop();
        }
    },

    /**
     * We override the hidden method because we don't want to remove it from the view using display:none. Instead we just position it off
     * the screen, much like the navigation bar proxy. This means that all animations, pushing, popping etc. all still work when if you hide/show
     * this bar at any time.
     * @private
     */
    doSetHidden: function (hidden) {
        if (!hidden) {
            this.element.setStyle({
                position: 'relative',
                top: 'auto',
                left: 'auto',
                 'auto'
            });
        } else {
            this.element.setStyle({
                position: 'absolute',
                top: '-1000px',
                left: '-1000px',
                 this.element.getWidth() + 'px'
            });
        }
    },

    /**
     * Creates a proxy element of the passed element, and positions it in the same position, using absolute positioning.
     * The createNavigationBarProxy method uses this to create proxies of the backButton and the title elements.
     * @private
     */
    createProxy: function (element) {
        var ghost, x, y, left, width;

        ghost = element.dom.cloneNode(true);
        ghost.id = element.id + '-proxy';

        //insert it into the toolbar
        element.getParent().dom.appendChild(ghost);

        //set the x/y
        ghost = Ext.get(ghost);
        x = element.getX();
        y = element.getY();
        left = element.getLeft();
        width = element.getWidth();
        ghost.setStyle('position', 'absolute');
        ghost.setX(x);
        ghost.setY(y);
        ghost.setHeight(element.getHeight());
        ghost.setWidth(width);

        return {
            x: x,
            y: y,
            left: left,
             width,
            ghost: ghost
        };
    }
});