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

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

  1 /*
  2 *扩展NavigationView
  3 *返回时自动销毁视图，节约内存
  4 */
  5 Ext.define('ux.CardPanel', {
  6     extend: 'Ext.NavigationView',
  7     xtype: 'cardPanel',
  8     config: {
  9         navigationBar: {
 10             /*禁止标题切换动画防止pop+push时标题位移*/
 11             animation: false
 12         }
 13     },
 14     /*初始化*/
 15     initialize: function () {
 16         this.viewStack = {};
 17         //设置初始页面
 18         var defItemId = this.getDefItemId();
 19         if (defItemId) {
 20             this.viewStack[defItemId] = true;
 21         }
 22         return this.callParent(arguments);
 23     },
 24     /*调试*/
 25     //        applyActiveItem: function (newCard, oldCard) {
 26     //            console.log(this.getItems().keys);
 27     //            return this.callParent(arguments);
 28     //        },
 29     /*返回按钮被点击时*/
 30     onBackButtonTap: function () {
 31         this.popView();
 32     },
 33     /*移除所有的视图,并且显示一个新的视图*/
 34     popAllAndPush: function (xtype, title) {
 35         var me = this,
 36         innerItems = this.getInnerItems();
 37         for (var i = innerItems.length - 1; i > -1; i--) {
 38             /*过滤掉需要显示的视图*/
 39             ord = innerItems[i];
 40             if (ord.getItemId() != xtype) {
 41                 /*控制返回按钮的显示*/
 42                 /*先hide再remove不然再次push时会出错*/
 43                 ord.hide();
 44                 me.remove(ord, true);
 45                 me.viewStack[ord.getItemId()] = false;
 46             }
 47         }
 48         //添加新视图
 49         me.pushView(xtype, title);
 50         //重置历史记录
 51         me.getNavigationBar().backButtonStack = [title];
 52     },
 53     /*添加个新的视图*/
 54     pushView: function (xtype, title) {
 55         /*过滤已经添加的视图*/
 56         if (!this.viewStack[xtype]) {
 57             var viwe = Ext.create(xtype, {
 58                 title: title,
 59                 itemId: xtype
 60             });
 61             this.push(viwe);
 62         } else if (this.getActiveItem().getItemId() != xtype) {
 63             this.setActiveItem(xtype);
 64         }
 65         this.viewStack[xtype] = true;
 66     },
 67     /*移除当前视图且显示一个新的视图*/
 68     popAndPush: function (xtype, title, isClear) {
 69         this.popView();
 70         /*是否清除纪录*/
 71         if (isClear) {
 72             this.getNavigationBar().backButtonStack.pop();
 73         }
 74         this.pushView(xtype, title);
 75     },
 76     /*移除当前视图*/
 77     popView: function () {
 78         var me = this,
 79         innerItems = this.getInnerItems(),
 80         ord = innerItems[innerItems.length - 1];
 81         if (ord) {
 82             me.viewStack[ord.getItemId()] = false;
 83             ord.hide();
 84             //强制销毁，防止销毁不完全引发错误
 85             me.remove(ord, true);
 86         }
 87     },
 88     //隐藏导航栏
 89     navHide: function () {
 90         var nav = this.getNavigationBar();
 91         !nav.isHidden() && nav.hide();
 92     },
 93     //显示导航栏
 94     navShow: function () {
 95         var nav = this.getNavigationBar();
 96         nav.isHidden() && nav.show();
 97     },
 98     //隐藏返回按钮
 99     backBtnHide: function () {
100         var btn = this.getNavigationBar().getBackButton();
101         !btn.isHidden() && btn.hide();
102     },
103     //显示需要显示的额外按钮,没有配置action属性的按钮不受控制
104     showBtn: function (show) {
105         show = show ? show : [];
106         var showItem = {};
107         for (var i = 0,
108             item; item = show[i]; i++) {
109             showItem[item] = true;
110         }
111         var nav = this.getNavigationBar();
112         if (nav) {
113             var btns = nav.query('button');
114             for (var i = 0,
115             item; item = btns[i]; i++) {
116                 if (showItem[item.action]) {
117                     item.show();
118                 } else if (item.action) {
119                     item.hide();
120                 }
121             }
122         }
123     }
124 });

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

  1 /*公共类*/
  2 Ext.define('myUtil', {
  3     statics: {
  4         //store公用加载方法
  5         storeLoadById: function (id) {
  6             var store = Ext.getStore(id);
  7             if (store && store.getCount() < 1) {
  8                 this.storeLoad(store);
  9             }
 10         },
 11         //store加载方法，带参数
 12         storeLoadByParams: function (store, params) {
 13             if (store) {
 14                 store.removeAll();
 15                 store.setProxy({
 16                     extraParams: params
 17                 });
 18                 this.storeLoad(store);
 19             }
 20         },
 21         //加载stroe
 22         storeLoad: function (store) {
 23             var me = this;
 24             me.showMessage('正在努力加载中...');
 25             store.loadPage(1, function () {
 26                 me.hideMessage();
 27             });
 28         },
 29         //list->info公用加载方法
 30         showInfo: function (record, view, url, params) {
 31             var me = this;
 32             me.showMessage('正在努力加载中...');
 33             Ext.data.JsonP.request({
 34                 url: url,
 35                 params: params,
 36                 success: function (result, request) {
 37                     record.set(result);
 38                     view.setData(record.data);
 39                     me.hideMessage();
 40                 }
 41             });
 42         },
 43         /*为Ext.Viewport添加一个消息提示组件*/
 44         addMessage: function () {
 45             Ext.Viewport.setMasked({
 46                 xtype: 'loadmask',
 47                 cls: 'message',
 48                 transparent: true,
 49                 indicator: false
 50             });
 51             this.hideMessage();
 52 
 53         },
 54         /*显示一个消息提示*/
 55         showMessage: function (mes, autoHide) {
 56             var message = this.getMessage();
 57             message.setMessage(mes);
 58             message.isHidden() && message.show();
 59             //是否自动关闭提示
 60             if (autoHide) {
 61                 setTimeout(function () {
 62                     !message.isHidden() && message.hide();
 63                 },
 64                 1000);
 65             }
 66         },
 67         /*隐藏消息提示*/
 68         hideMessage: function () {
 69             var message = this.getMessage();
 70             !message.isHidden() && message.hide();
 71         },
 72         //活动消息组件
 73         getMessage: function () {
 74             return Ext.Viewport.getMasked();
 75         },
 76         //重写Lsit相关
 77         overrideList: function () {
 78             //重写分页插件
 79             Ext.define("Ext.zh.plugin.ListPaging", {
 80                 override: "Ext.plugin.ListPaging",
 81                 config: {
 82                     //自动加载
 83                     autoPaging: true,
 84                     //滚动到最底部时是否自动加载下一页数据
 85                     noMoreRecordsText: '没有更多内容了',
 86                     loadMoreText: '加载更多...' //加载更多按钮显示内容
 87                 }
 88             });
 89             //重写List
 90             Ext.define("Ext.zh.List", {
 91                 override: "Ext.List",
 92                 config: {
 93                     //取消选择效果
 94                     selectedCls: '',
 95                     //禁用加载遮罩，防止跳转时页面卡顿，使用统一的遮罩效果
 96                     loadingText: false,
 97                     emptyText: '没有更多内容了'
 98                 }
 99             });
100         }
101     }
102 });

使用：

 1 /*
 2 *主视图,负责视图切换
 3 */
 4 Ext.define('app.view.Main', {
 5     extend: 'ux.CardPanel',
 6     requires: ['app.view.Home', 'Ext.picker.Picker'],
 7     xtype: 'main',
 8     config: {
 9         navigationBar: {
10             cls: 'backNavigation',
11             hidden: true,
12             items: [{
13                 hidden: true,
14                 action: 'add',
15                 xtype: 'button',
16                 align: 'left'
17             },
18             {
19                 hidden: true,
20                 action: 'select',
21                 xtype: 'button',
22                 align: 'right'
23             }]
24         },
25         //默认显示的界面itemId
26         defItemId: 'home',
27         defaultBackButtonText: '',
28         //默认项只能有一个
29         items: [{
30             itemId: 'home',
31             xtype: 'home'
32         }]
33     },
34     //执行返回
35     onBackButtonTap: function () {
36         //隐藏消息提示
37         myUtil.hideMessage();
38         //移除当前视图
39         this.popView();
40         //历史记录回退
41         history.back();
42     },
43     /*返回上一视图*/
44     Back: function () {
45         this.onBackButtonTap();
46     }
47 });

切换代码：

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

呃，这个木有示例...

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

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