自定义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();
}