/**
* @author Ed Spencer
* @private
*
* Manages the stack of {@link Ext.app.Action} instances that have been decoded, pushes new urls into the browser's
* location object and listens for changes in url, firing the {@link #change} event when a change is detected.
*
* This is tied to an {@link Ext.app.Application Application} instance. The Application performs all of the
* interactions with the History object, no additional integration should be required.
*/
Ext.define('Ext.app.History', {
mixins: ['Ext.mixin.Observable'],
/**
* @event change
* Fires when a change in browser url is detected
* @param {String} url The new url, after the hash (e.g. http://myapp.com/#someUrl returns 'someUrl')
*/
config: {
/**
* @cfg {Array} actions The stack of {@link Ext.app.Action action} instances that have occurred so far
*/
actions: [],
/**
* @cfg {Boolean} updateUrl `true` to automatically update the browser's url when {@link #add} is called.
*/
updateUrl: true,
/**
* @cfg {String} token The current token as read from the browser's location object.
*/
token: ''
},
constructor: function(config) {
if (Ext.feature.has.History) {
window.addEventListener('hashchange', Ext.bind(this.detectStateChange, this));
}
else {
this.setToken(window.location.hash.substr(1));
setInterval(Ext.bind(this.detectStateChange, this), 100);
// 定时监听 url 变化, 生成action 完成路由跳转
//window.location.hash 真是html5 的好东西呀!!!
}
this.initConfig(config);
},
/**
* Adds an {@link Ext.app.Action Action} to the stack, optionally updating the browser's url and firing the
* {@link #change} event.
* @param {Ext.app.Action} action The Action to add to the stack.
* @param {Boolean} silent Cancels the firing of the {@link #change} event if `true`.
*/
add: function(action, silent) {
this.getActions().push(Ext.factory(action, Ext.app.Action));
var url = action.getUrl();
if (this.getUpdateUrl()) {
// history.pushState({}, action.getTitle(), "#" + action.getUrl());
this.setToken(url);
window.location.hash = url;
}
if (silent !== true) {
this.fireEvent('change', url);
}
this.setToken(url);
},
/**
* Navigate to the previous active action. This changes the page url.
*/
back: function() {
var actions = this.getActions(),
previousAction = actions[actions.length - 2],
app = previousAction.getController().getApplication();
actions.pop();
app.redirectTo(previousAction.getUrl());
},
/**
* @private
*/
applyToken: function(token) {
return token[0] == '#' ? token.substr(1) : token;
},
/**
* @private
*/
detectStateChange: function() {
var newToken = this.applyToken(window.location.hash),
oldToken = this.getToken();
if (newToken != oldToken) {
this.onStateChange();
this.setToken(newToken);
}
},
/**
* @private
*/
onStateChange: function() {
this.fireEvent('change', window.location.hash.substr(1));
}
});
分享到:
相关推荐
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
Sencha Touch开发的项目《般若人生》源码
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
sencha touch 折叠list
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch 2.4.0最新版 原版包下载
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
sencha touch list demo
sencha touch cookbook 英文高清文字版 !
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
这是我做的一个sencha touch 的项目,测试并能运行,希望对大家有帮助
sencha touch动态加载组件及容器内容,防止加载时间过长的问题
sencha touch grid
《Sencha Touch 权威指南》陆凌牛著的源码包
sencha touch sdk工具
sencha touch2移动开发框架,ajax获取数据
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助