自定义cardpanel改进NavigationView支持路由，历史记录，加入消息提示组件（废弃 仅参考）

直接分离插件化，可选择是否支持历史记录功能

/*
*扩展NavigationView
*返回时自动销毁视图，节约内存
*/
Ext.define('ux.CardPanel', {
    extend: 'Ext.NavigationView',
    xtype: 'cardPanel',
    config: {
        navigationBar: {
            /*禁止标题切换动画防止pop+push时标题位移*/
            animation: false
        }
    },
    /*初始化*/
    initialize: function () {
        this.viewStack = {};
        //设置初始页面
        var defItemId = this.getDefItemId();
        if (defItemId) {
            this.viewStack[defItemId] = true;
        }
        return this.callParent(arguments);
    },
    /*调试*/
    //        applyActiveItem: function (newCard, oldCard) {
    //            console.log(this.getItems().keys);
    //            return this.callParent(arguments);
    //        },
    /*返回按钮被点击时*/
    onBackButtonTap: function () {
        this.popView();
    },
    /*移除所有的视图,并且显示一个新的视图*/
    popAllAndPush: function (xtype, title) {
        var me = this,
        innerItems = this.getInnerItems();
        for (var i = innerItems.length - 1; i > -1; i--) {
            /*过滤掉需要显示的视图*/
            ord = innerItems[i];
            if (ord.getItemId() != xtype) {
                /*控制返回按钮的显示*/
                /*先hide再remove不然再次push时会出错*/
                ord.hide();
                me.remove(ord, true);
                me.viewStack[ord.getItemId()] = false;
            }
        }
        //添加新视图
        me.pushView(xtype, title);
        //重置历史记录
        me.getNavigationBar().backButtonStack = [title];
    },
    /*添加个新的视图*/
    pushView: function (xtype, title) {
        /*过滤已经添加的视图*/
        if (!this.viewStack[xtype]) {
            var viwe = Ext.create(xtype, {
                title: title,
                itemId: xtype
            });
            this.push(viwe);
        } else if (this.getActiveItem().getItemId() != xtype) {
            this.setActiveItem(xtype);
        }
        this.viewStack[xtype] = true;
    },
    /*移除当前视图且显示一个新的视图*/
    popAndPush: function (xtype, title, isClear) {
        this.popView();
        /*是否清除纪录*/
        if (isClear) {
            this.getNavigationBar().backButtonStack.pop();
        }
        this.pushView(xtype, title);
    },
    /*移除当前视图*/
    popView: function () {
        var me = this,
        innerItems = this.getInnerItems(),
        ord = innerItems[innerItems.length - 1];
        if (ord) {
            me.viewStack[ord.getItemId()] = false;
            ord.hide();
            //强制销毁，防止销毁不完全引发错误
            me.remove(ord, true);
        }
    },
    //隐藏导航栏
    navHide: function () {
        var nav = this.getNavigationBar();
        !nav.isHidden() && nav.hide();
    },
    //显示导航栏
    navShow: function () {
        var nav = this.getNavigationBar();
        nav.isHidden() && nav.show();
    },
    //隐藏返回按钮
    backBtnHide: function () {
        var btn = this.getNavigationBar().getBackButton();
        !btn.isHidden() && btn.hide();
    },
    //显示需要显示的额外按钮,没有配置action属性的按钮不受控制
    showBtn: function (show) {
        show = show ? show : [];
        var showItem = {};
        for (var i = 0,
            item; item = show[i]; i++) {
            showItem[item] = true;
        }
        var nav = this.getNavigationBar();
        if (nav) {
            var btns = nav.query('button');
            for (var i = 0,
            item; item = btns[i]; i++) {
                if (showItem[item.action]) {
                    item.show();
                } else if (item.action) {
                    item.hide();
                }
            }
        }
    }
});

消息提示功能被单独提取为公用类

/*公共类*/
Ext.define('myUtil', {
    statics: {
        //store公用加载方法
        storeLoadById: function (id) {
            var store = Ext.getStore(id);
            if (store && store.getCount() < 1) {
                this.storeLoad(store);
            }
        },
        //store加载方法，带参数
        storeLoadByParams: function (store, params) {
            if (store) {
                store.removeAll();
                store.setProxy({
                    extraParams: params
                });
                this.storeLoad(store);
            }
        },
        //加载stroe
        storeLoad: function (store) {
            var me = this;
            me.showMessage('正在努力加载中...');
            store.loadPage(1, function () {
                me.hideMessage();
            });
        },
        //list->info公用加载方法
        showInfo: function (record, view, url, params) {
            var me = this;
            me.showMessage('正在努力加载中...');
            Ext.data.JsonP.request({
                url: url,
                params: params,
                success: function (result, request) {
                    record.set(result);
                    view.setData(record.data);
                    me.hideMessage();
                }
            });
        },
        /*为Ext.Viewport添加一个消息提示组件*/
        addMessage: function () {
            Ext.Viewport.setMasked({
                xtype: 'loadmask',
                cls: 'message',
                transparent: true,
                indicator: false
            });
            this.hideMessage();

        },
        /*显示一个消息提示*/
        showMessage: function (mes, autoHide) {
            var message = this.getMessage();
            message.setMessage(mes);
            message.isHidden() && message.show();
            //是否自动关闭提示
            if (autoHide) {
                setTimeout(function () {
                    !message.isHidden() && message.hide();
                },
                1000);
            }
        },
        /*隐藏消息提示*/
        hideMessage: function () {
            var message = this.getMessage();
            !message.isHidden() && message.hide();
        },
        //活动消息组件
        getMessage: function () {
            return Ext.Viewport.getMasked();
        },
        //重写Lsit相关
        overrideList: function () {
            //重写分页插件
            Ext.define("Ext.zh.plugin.ListPaging", {
                override: "Ext.plugin.ListPaging",
                config: {
                    //自动加载
                    autoPaging: true,
                    //滚动到最底部时是否自动加载下一页数据
                    noMoreRecordsText: '没有更多内容了',
                    loadMoreText: '加载更多...' //加载更多按钮显示内容
                }
            });
            //重写List
            Ext.define("Ext.zh.List", {
                override: "Ext.List",
                config: {
                    //取消选择效果
                    selectedCls: '',
                    //禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果
                    loadingText: false,
                    emptyText: '没有更多内容了'
                }
            });
        }
    }
});

使用：

/*
*主视图,负责视图切换
*/
Ext.define('app.view.Main', {
    extend: 'ux.CardPanel',
    requires: ['app.view.Home', 'Ext.picker.Picker'],
    xtype: 'main',
    config: {
        navigationBar: {
            cls: 'backNavigation',
            hidden: true,
            items: [{
                hidden: true,
                action: 'add',
                xtype: 'button',
                align: 'left'
            },
            {
                hidden: true,
                action: 'select',
                xtype: 'button',
                align: 'right'
            }]
        },
        //默认显示的界面itemId
        defItemId: 'home',
        defaultBackButtonText: '',
        //默认项只能有一个
        items: [{
            itemId: 'home',
            xtype: 'home'
        }]
    },
    //执行返回
    onBackButtonTap: function () {
        //隐藏消息提示
        myUtil.hideMessage();
        //移除当前视图
        this.popView();
        //历史记录回退
        history.back();
    },
    /*返回上一视图*/
    Back: function () {
        this.onBackButtonTap();
    }
});

 切换代码：

//显示视图xtype:这里是指alternateClassName,showBtn需要显示的按钮action集合
showView: function (xtype, title, showBtn) {
        var main = this.getMain();
        main.pushView(xtype, title);
        main.showBtn(showBtn);
},
showAction: function () {
        this.showView('actionList', '校园活动', ['add', 'select']);
        this.getMain().backBtnHide();
}

呃，这个木有示例...