1. **通过`window.location.href`方式**
JavaScript 的基本机制同样适用于 Ext JS 中，在需要直接从一个 URL 跳转到另一个时可以直接使用 `window.location.href` 属性：
javascript
// 在 Ext JS 应用程序中简单地改变当前窗口地址以加载新的页面
window.location.href = 'http://www.example.com/new_page.html';
2. **利用`Ext.util.History`类（SPA应用）**
对于单页应用(SPA)，推荐采用基于HTML5 History API的方式来进行无刷新页面切换。例如：
javascript
// 首先初始化History管理器
if (Ext.isReady) {
var history = new Ext.util.History();
history.init();
// 注册监听history变化事件
history.on('change', function(token){
switch(token) {
case "newPage":
MyApp.getApplication().getController('Main').loadNewPage();
break;
default:
console.log("No handler for token: ", token);
}
});
// 切换至新“页面”
history.add('newPage');
}
// 在对应的控制器里定义loadNewPage函数更新视图内容模拟"页面”跳转
loadNewPage : function() {
this.getViewport().setActiveItem({
xtype: 'my_new_view'
});
}
3. **运用Sencha Cmd生成的应用内路由系统(对于大型SPAs)**
Sencha CMD工具集支持为你的ExtJS项目创建模块化、可维护的路由体系结构。配置好app.json中的routes字段后可以这样操作：
json
...
"routes": [
{"name": "newpage", "url": "/new-page/:param?", "action": "showNewPage"}
],
...
// 控制器部分处理route动作
showNewPage: function(param) {
var view = Ext.create('MyApp.view.NewView', {params:param});
this.viewport.setActiveItem(view);
},
4. **使用Ext.ComponentLoader动态载入组件与数据**
如果不是严格意义上的全屏级“页面”更换，而是在同一个容器部件如tabpanel或者container中嵌套加载不同URL的内容，则可以通过Component Loader达到类似效果:
javascript
var myPanel = Ext.widget('panel', {
title: 'Dynamic Content',
loader: {
url: '/path/to/your/content.htm',
autoLoad: true,
renderer: 'html' // or use 'script' to execute scripts in loaded content.
}
});
// 将此面板添加进viewport或其他包含物即可。
总结起来，选择何种方式进行页面跳转取决于您的具体应用场景：如果是传统的多页面web应用(MPA),则通常会借助浏览器本身的导航能力；而对于现代化的Single Page Application设计模式而言，更多时候我们会依赖框架提供的历史管理和客户端路由方案以及动态装载技术完成所谓的“页面间”的无缝过渡体验。
标签： extjs页面跳转
