sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮（废弃 仅参考）

最新版本我将会放在：http://www.cnblogs.com/mlzs/p/3382229.html这里的示例里面，这里不会再做更新

代码：

/*
*模仿且改进NavigationView
*返回时自动销毁视图，节约内存
*/
Ext.define('ux.CardPanel', {
    extend: 'Ext.Container',
    xtype: 'cardPanel',
    requires: ['Ext.TitleBar'],
    config: {
        //顶部导航条
        navBar: {
            docked: 'top'
        },
        //布局，type不可更改
        layout: {
            type: 'card',
            animation: {
                duration: 300,
                easing: 'ease-out',
                type: 'slide',
                direction: 'left'
            }
        },
        //顶部控件组，在子项中配置
        navBarItems: null,
        //返回按钮
        backBtn: {
            align: 'left',
            ui: 'back'
        },
        //返回按钮显示状态，在子项中配置
        backHide: false,
        //临时cls，在子项中配置
        pCls: null,
        //底部导航栏、可选格式btmBar:'xtype'，在子项中配置
        btmBar: null,
        //当子项被激活后移除除了指定项之外的项，在子项中配置
        nRemove: null
    },
    //初始化
    initialize: function () {
        var layout = this.getLayout();
        if (layout && !layout.isCard) {
            Ext.Logger.error('CardPanel中layout的布局只能是card布局');
        }
        this.initStatus();
    },
    //初始化历史记录
    initStatus: function () {
        if (!this.viewStack) {
            //历史记录
            this.viewStack = [];
            //视图加载状态
            this.viewStatus = {};
        }
    },
    //更新返回按钮显示状态
    updateBackHide: function (newItem, oldItem) {
        var backBtn = this.getBackBtn();
        if (newItem) {
            backBtn.hide();
        } else {
            backBtn.show();
        }
    },
    //更新底部导航栏
    updateBtmBar: function (newItem, oldItem) {
        if (oldItem) {
            oldItem = this.down(oldItem);
            this.remove(oldItem);
        }
        if (newItem) {
            newItem = Ext.create(newItem);
            this.add(newItem);
        }
    },
    //创建导航栏控件组
    applyNavBarItems: 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++) {
            navItems.push(me.factoryItem(newItems[i]));
        }
        return navItems;
    },
    //更新导航栏控件组
    updateNavBarItems: function (newItem, oldItem) {
        var navBar = this.getNavBar();
        if (oldItem) {
            var i, ln;
            for (i = 0, ln = oldItem.length; i < ln; i++) {
                navBar.remove(oldItem[i]);
            }
        }
        if (newItem) {
            navBar.add(newItem);
        }
    },
    //创建顶部导航栏
    applyNavBar: function (config) {
        return Ext.factory(config, Ext.TitleBar, this.getNavBar());
    },
    //更新顶部导航栏
    updateNavBar: function (newItem, oldItem) {
        if (oldItem) {
            this.remove(oldItem);
        }
        if (newItem) {
            this.add(newItem);
        }
    },
    //更新临时cls
    updatePCls: function (newItem, oldItem) {
        if (oldItem) {
            this.removeCls(oldItem);
        }
        if (newItem) {
            this.addCls(newItem);
        }
    },
    //创建返回按钮
    applyBackBtn: function (config) {
        return Ext.factory(config, Ext.Button, this.getBackBtn());
    },
    //更新返回按钮
    updateBackBtn: function (newItem, oldItem) {
        if (oldItem) {
            this.getNavBar().remove(oldItem);
        }
        if (newItem) {
            this.getNavBar().add(newItem);
            newItem.on({
                scope: this,
                tap: this.onBackButtonTap
            });
        }
    },
    //更新移除
    updateNRemove: function (newItem, oldItem) {
        var animation = this.getLayout().getAnimation();
        if (oldItem) {
            //移除动画结束监听
            animation.un({
                scope: this,
                animationend: 'onAnimationend'
            });
        }
        if (newItem) {
            //添加动画结束监听
            animation.on({
                scope: this,
                animationend: 'onAnimationend'
            });
        }
    },
    /**
    * 移除历史记录
    * @private
    */
    viewStackPop: function (count) {
        for (var i = 0; i < count; i++) {
            this.viewStack.pop();
        }
    },
    //添加视图
    //注意xtype是指alternateClassName
    push: function (xtype, params) {
        var me = this,
        view = this.getActiveItem(),
        oldXtype = view && (view.config.xtype || view.getItemId());
        /*过滤已经添加的视图*/
        if (!this.viewStatus[xtype]) {
            params = params || {};
            params.itemId = xtype;
            view = Ext.create(xtype, params);
            this.add(view);
        } else if (oldXtype != xtype) {
            this.viewStack.push(xtype);
            this.setActiveItem(xtype);
        }
    },
    //当动画效果结束时,子项配置了nRemove属性将会激活
    onAnimationend: function () {
        //        console.log('animationend');
        this.popAll(this.getNRemove());
    },
    //项被激活
    onActivate: function (view) {
        var config = view.config;
        //        console.log('activate', config.xtype || view.getItemId());
        //更新后退按钮
        //        console.log('setBackHide', this.viewStack);
        this.setBackHide(config.backHide || this.viewStack.length == 1);
        //更新按钮组
        var items = config.navBarItems || false;
        this.setNavBarItems(items);
        //更新cls
        var pCls = config.pCls || false;
        this.setPCls(pCls);
        //更新标题
        var title = config.title || '';
        this.getNavBar().setTitle(title);
        //更新底部导航栏
        var btmBar = config.btmBar || false;
        this.setBtmBar(btmBar);
        //更新移除
        var nRemove = config.nRemove || false;
        this.setNRemove(nRemove);
    },
    //项被销毁
    onDestroy: function (view) {
        //        console.log('onDestroy', view.config.xtype || view.getItemId());
        this.viewStatus[view.config.xtype || view.getItemId()] = false;
    },
    /**
    * 不填写参数时，移除当前项，返回到上一项
    * 如果参数是数字，则从最后一项开始移除指定数目的项
    * 如果参数是string,则移除指定类型的项
    * 如果参数是项，则移除传入的项
    * 不论参数如何，都会保留一个活动项
    * @return {Ext.Component} 当前活动项
    */
    pop: function (count) {
        if (this.beforePop(count)) {
            return this.doPop();
        }
    },
    /**
    * @private
    *删除指定项
    */
    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;
        //默认移除一项
        if (!Ext.isNumber(count) || count < 1) {
            count = 1;
        }
        //当我们试图移除更多视图时
        count = Math.min(count, ln - 1);
        if (count) {
            this.viewStackPop(count);
            //开始移除视图
            toRemove = innerItems.splice(-count, count - 1);
            for (i = 0; i < toRemove.length; i++) {
                this.remove(toRemove[i]);
            }
            return true;
        }
        return false;
    },
    /**
    * @private
    *移除最后一项
    */
    doPop: function () {
        var me = this,
        innerItems = this.getInnerItems(),
        ord = innerItems[innerItems.length - 1];
        me.remove(ord);
        //触发被移除项的事件
        return this.getActiveItem();
    },
    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);
        }
    },
    /**
    * @private 
    *执行移除项，调用remove方法后自动执行
    */
    doRemove: function () {
        var animation = this.getLayout().getAnimation();
        if (animation && animation.isAnimation) {
            animation.setReverse(false);
        }
        this.callParent(arguments);
    },
    /**
    * @private 
    *执行添加项，调用add方法后自动执行
    */
    onItemAdd: function (item, index) {
        if (item.isInnerItem()) {
            var xtype = item.config.xtype || item.getItemId();
            //如果配置了items,会先于initialize执行，所以需要初始化历史纪录
            this.initStatus();
            this.viewStatus[xtype] = true;
            this.viewStack.push(xtype);
            //添加监听
            item.on({
                scope: this,
                activate: 'onActivate',
                destroy: 'onDestroy'
            });
        }
        this.doItemLayoutAdd(item, index);
        if (!this.isItemsInitializing && item.isInnerItem()) {
            this.setActiveItem(item);
        }
        if (this.initialized) {
            this.fireEvent('add', this, item, index);
        }
    },
    /**
    * 移除第一项和最后项之间的所有项（包括最后项）
    * @return {Ext.Component} 当前活动视图
    */
    reset: function (noUp) {
        return this.pop(this.getInnerItems().length);
    },
    //除了指定项,从倒数第二项开始移除
    popAll: function (xtype) {
        var me = this,
        innerItems = this.getInnerItems(),
        length = innerItems.length - 1,
        oldXtype,
        ord,
        i;
        this.viewStack = [xtype];
        for (i = length; i > -1; i--) {
            /*过滤掉需要显示的视图*/
            ord = innerItems[i];
            oldXtype = ord.config.xtype || ord.getItemId();
            if (i == length) {
                me.viewStack.push(oldXtype);
            } else if (oldXtype != xtype) {
                me.remove(ord, true);
            }
        }
    },
    //返回上一个历史记录
    onBackButtonTap: function () {
        this.pop();
        this.fireEvent('back', this);
    }
});

主视图js：

/*
*主视图,负责视图切换
*/
Ext.define('app.view.Main', {
    extend: 'ux.CardPanel',
    requires: ['app.view.Home', 'Ext.picker.Picker', 'app.view.uitl.MyBar', 'app.view.user.Site'],
    xtype: 'main',
    config: {
        id: 'main',
        cls: 'cardPanel',
        backBtn: {
            iconCls: 'reply',
            iconMask: true,
            cls: 'replyBtn'
        },
        //items只能配置一项
        items: [{
            xtype: 'home'
        }]
    }
});

子视图js：

Ext.define('app.view.message.List', {
    alternateClassName: 'messageList',
    extend: 'Ext.List',
    xtype: 'messageList',
    requires: ['Ext.plugin.ListPaging'],
    config: {
        cls: 'list',
        //标题
        title: '校园资讯',
        //用于控制navBarItems中的css
        pCls: '',
        //底部导航栏，直接填写alternateClassName
        btmBar: 'myBar',
        //额外的按钮组，只能是按钮组。不能添加其他属性
        navBarItems: [{
            itemId: 'mBtn',
            xtype: 'button',
            align: 'right',
            iconMask: true,
            cls: 'nBg',
            iconCls: 'search',
            action: 'show',
            show: 'messageSearch'
        }],
        plugins: [{
            xclass: 'Ext.plugin.ListPaging'
        }],
        itemTpl: '<div class="title">{Title}</div><div class="sm">时间 {Time}&nbsp;&nbsp;&nbsp;&nbsp;发布来源：{Auth}</div><div class="like"><div class="ico comment">0</div></div>',
        store: 'messageList'
    }
});

2013.9.6

更改CardPanel

优化navBarItems结构，itemId不再必须设置

优化for循环结果

修复popAll方法中ord为全局变量的问题

2013.9.6

更改push方法，可以在传入配置参数（只在第一次创建视图时有效）

2013.10.7

优化代码细节

2013.10.10

更改pop方法，将代码this.setActiveItem(this.getLateViewStack());移动到onBackButtonTap方法中，以解决pop后再push无动画效果的问题

2013.10.18

参照NavigationView大幅度修改代码，去除一些无用代码

2013.10.22

更新push方法，更好的配置自定义参数

移除debug标签，解决cmd压缩后出错的问题。感谢@低碳哥指出

2013.10.23

优化代码，移除了除了back之外的所有自定义事件。如需使用可以考虑用 activate与deactivate事件代替

相关代码：http://www.cnblogs.com/mlzs/p/3382909.html