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'
? ? ? ? ? ? ? ?});
? ? ? ? ? ? ? //
? ? ? ? ? ? ? ?var layout = me.getLayout();
? ? ? ? ? ? ? ?if (layout && !layout.isCard) {
? ? ? ? ? ? ? ? ? ? ? ? ? Ext.Logger.error('The base layout for a NavigationView must always be aCard Layout');
? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?//
},
/**
*@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;
? ? ? ? ? ? ?//
? ? ? ? ? ? ?Ext.Logger.warn("Ext.navigation.View: The 'navigationBar'configuration does not accept a 'title' property. You " +
? ? ? ? ? ? ?"set the titleof the navigationBar by giving this navigation view's children a 'title'property.");
? ? ? ? ? ? ? //
? ? ? ?}
? ? ? ? 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);
}
});
