在使用ExtJS的时候，Panel是一个最常用的组件，Panel包含一个load()函数，用法是：使用XHR（指Ajax请求）调用的返回内容来立即加载此panel。
但是Ext的Panel本质上不过是一个div而已，所以其实这时候本质问题是：如何在一个div里面加载一个其他页面？
最容易想到的是：在div里面放一个iframe，让这个iframe链接到另外一个页面。这样也是最简单的方法，不过使用iframe有个问题就是父窗口和子窗口的window、window.location等等客户端JavaScript对象已经不是相同的对象了，这样对JavaScript编程或URL地址等方面不容易统一处理。
可以这样考虑，浏览器无非是显示一些html标签组成的数据，如果我们能获得其他网页的html数据，然后把这些数据加入到div的innerHTML里面去，实际上就获得了在一个div里面加载一个其他页面的效果。（注意：只是效果看起来一样，并不是真的链接到了其他页面）。那么如何获得html数据呢？答案是：采用Ajax的返回值。
例子如下（随便写的测试，没处理一些细节）：
<html>
<script type="text/javascript">
window.onload = function() {
var ajax = new XMLHttpRequest();
ajax.open("GET","http://www.163.com",true);
ajax.send();
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
if(ajax.status == 200) {
alert(ajax.responseText);
var htmlData = ajax.responseText;
var bodyData = htmlData.substring(htmlData.indexOf("<body>")+6,htmlData.lastIndexOf("</body>"));
alert(bodyData);
document.getElementById("a").innerHTML = bodyData;
}
}
};
}
</script>
<body>
<div id="a"></div>
</body>
</html>
这样，就直接在这个div中添加了网易的html数据（并非链接到网易：浏览器地址栏仍然在自己的页面上），当然这时候css和网页效果消失了，这是正常的。
所以ExtJS的Panel的load函数，也是通过Ajax返回了其他页面的html数据，放入了div中，而绝非直接链接到了其他页面。
分享到：
相关推荐
首先，`Ext.Panel`是一个可配置的容器，它可以包含其他组件，如按钮、表格、表单等。它提供了丰富的布局管理，如`fit`布局（适合填充其父容器）、`border`布局（带有边框）等。动态加载本地数据到`Ext.Panel`通常...
`Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单，并且提供了大量的功能来帮助处理表单数据，如验证、提交以及数据绑定等。 ### 二、...
GridPanel是ExtJs中一个非常重要的组件，它用于展示表格数据，而延时加载则是一种优化大量数据处理的技术，可以显著提高用户界面的响应速度。 1. **ExtJs GridPanel**： GridPanel是ExtJs中的核心组件之一，它提供...
在IT领域，特别是Web开发中，ExtJS是一个广泛使用的JavaScript框架，它提供了丰富的用户界面组件和强大的数据管理功能。本文将深入探讨如何使用ExtJS构建动态异步加载的树形结构，结合AJAX技术实现JSON数据的高效...
在ExtJS框架中，`TabPanel`组件是一个非常实用且强大的UI控件，它允许用户在一个界面上组织多个相关的视图或面板，并通过标签页的形式进行切换展示。在版本4.2.1中，`TabPanel`提供了丰富的API和方法来控制其行为，...
4. **TreeLoader**: TreeLoader是处理节点异步加载的工具，它接收一个配置对象，其中包括`dataUrl`（用于获取子节点数据的URL）和其他可选参数，如`params`（请求时传递的额外参数）。 5. **事件监听**: 当用户展开...
加载遮罩会在指定元素上覆盖一层半透明的背景，并显示一个加载图标或文字。例如，我们可以为整个页面设置加载遮罩： ```javascript var mask = new Ext.LoadMask(Ext.getBody(), {msg:"正在加载..."}); mask....
创建一个ExtJS 3的LovCombo实例，你需要按照以下步骤进行： 1. **初始化Store**：定义一个Ext.data.Store对象，用于存储lovcombo的数据。数据源可以是JSON、XML或者其他格式。 2. **定义Model**：定义数据模型，...
Accordion布局是一种特殊的布局方式，它允许在一个Panel内嵌套多个子Panel，并且这些子Panel只能有一个可见。当一个子Panel被展开时，其他所有子Panel会自动折叠。这种布局模式常用于空间有限但需要显示多个相关但...
ExtJS 4.0 是一个强大的JavaScript框架，用于构建富客户端Web应用程序。它引入了全新的MVC（Model-View-Controller）设计模式，这使得应用的结构更加清晰，代码更易于管理和维护。在这个主题中，我们将深入探讨如何...
ExtJS是一个用JavaScript编写的开源框架，用于构建交互式的Web应用程序，它提供了丰富的UI组件和数据处理功能。GridPanel是ExtJS中一个非常重要的组件，用于展示和编辑表格数据，它具有高度的定制性和灵活性。 ### ...
当Panel包含一个IFrame时，可能会遇到页面高度调整的问题，特别是在动态加载内容或者IFrame内页面高度不固定时。本文将深入探讨如何在使用ExtJS时解决Panel与IFrame结合时页面高度自动适应的问题。 首先，我们需要...
ExtJs是一个强大的JavaScript库，提供了丰富的组件和布局，用于构建富客户端应用程序。它提供了树形控件（TreePanel），可以方便地创建和管理具有动态特性的树结构。 在Struts2框架中，我们通常通过Action类处理...
在这个文件中，开发者可能定义了一个新的ExtJS组件类，扩展了原有的Panel或者其他容器类，以便嵌入IFrame。这个组件可能会包含以下关键属性和方法： 1. `html`: 用于设置IFrame的HTML代码，包括`<iframe>`标签。 2....
ExtJS Grid是一个强大的数据展示组件，它允许用户以表格的形式查看和操作大量数据。在实际应用中，数据过滤是常见的需求，以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作，以及如何动态地对...
例如，控制器可以有一个`loadModel`方法来加载模型，`loadView`来加载视图，而`getApplication`用于获取应用实例。 4. **组织架构示例**： 以组织架构管理为例，当我们点击功能节点树的“组织架构”时，只会加载`...
ExtJS 是一个强大的JavaScript库，专门用于构建富客户端Web应用程序。在2.1版本中，它提供了丰富的组件、数据管理以及用户界面功能。本学习笔记将深入探讨ExtJS 2.1的关键概念和技术，帮助读者掌握这个框架的核心...
ExtJS 4.2 是一个流行的JavaScript框架，用于构建富客户端Web应用程序。MVC（Model-View-Controller）模式是其核心设计模式，它有助于分离应用程序的逻辑，提高可维护性和可扩展性。在ExtJS 4.2中实现左菜单的动态...
ExtJS4.2 Tree 级联选择是一个用于构建用户界面的功能，特别是在处理层次结构数据时非常有用。在ExtJS库中，Tree组件允许我们展示和操作数据以树形结构显示，而级联选择功能则意味着当用户选择一个节点时，它的所有...