Ext.define('Ext.navigation.View', {
extend: 'Ext.Container',
alternateClassName: 'Ext.NavigationView',
xtype: 'navigationview',
requires: ['Ext.navigation.Bar'],
config: {
/**
* @cfg
* @inheritdoc
*/
baseCls: Ext.baseCSSPrefix + 'navigationview',
/**
* @cfg {Boolean/Object} navigationBar
* 用以配置导航栏
*/
navigationBar: {
docked: 'top'
},
/**
* @cfg {String} defaultBackButtonText
* 返回按钮默认显示值
*/
defaultBackButtonText: 'Back',
/**
* @cfg {Boolean} useTitleForBackButtonText
* 当此值为false时，返回按钮显示值为defaultBackButtonText中设置的值
* 当此值为true时，返回按钮显示值为上个项的title值
* @accessor
*/
useTitleForBackButtonText: false,
/**
* @cfg
* @hide
*/
layout: {
type: 'card',
animation: {
duration: 300,
easing: 'ease-out',
type: 'slide',
direction: 'left'
}
}
},
// @private
initialize: function () {
var me = this,
navBar = me.getNavigationBar();
//为导航栏上的后退按钮，添加监听
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;
},
/**
* @private
* 用户点击返回按钮
*/
onBackButtonTap: function () {
this.pop();
this.fireEvent('back', this);
},
/**
* 添加并且显示一个新项
* @return {Ext.Component}
*/
push: function (view) {
return this.add(view);
},
/**
* 不填写参数时，移除当前项，返回到上一项
* 如果参数是数字，则从最后一项开始移除指定数目的项
* 如果参数是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) {
//更新导航栏
me.getNavigationBar().beforePop(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();
me.remove(innerItems[innerItems.length - 1]);
return this.getActiveItem();
},
/**
* 获取上一项
* @return {Mixed} 上一项
*/
getPreviousItem: function () {
var innerItems = this.getInnerItems();
return innerItems[innerItems.length - 2];
},
/**
* 更新导航栏标题栏 {@link #navigationBar}
* @private
*/
updateUseTitleForBackButtonText: function (useTitleForBackButtonText) {
var navigationBar = this.getNavigationBar();
if (navigationBar) {
navigationBar.setUseTitleForBackButtonText(useTitleForBackButtonText);
}
},
/**
* 更新后退按钮显示值 {@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();
return Ext.factory(config, Ext.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;
}
return this.callParent([activeItem, currentActiveItem]);
},
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);
}
},
/**
* @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) {
this.doItemLayoutAdd(item, index);
if (!this.isItemsInitializing && item.isInnerItem()) {
this.setActiveItem(item);
this.getNavigationBar().onViewAdd(this, item, index);
}
if (this.initialized) {
this.fireEvent('add', this, item, index);
}
},
/**
* 移除第一项和最后项之间的所有项（包括最后项）
* @return {Ext.Component} 当前活动视图
*/
reset: function () {
return this.pop(this.getInnerItems().length);
}
});
