ExtJS 02：使用Grid显示本地及跨域数据

本文主要介绍了如何使用ExtJS框架来创建一个简单的表格，展示本地数据以及处理跨域数据的情况。在示例中，作者通过编写JavaScript代码展示了如何定义一个包含多个列（如行号、学号、姓名、班级、语文、数学、英语）的表格，并在页面加载时显示在一个窗口中。 在ExtJS中，`Ext.grid.Panel`是用于创建表格的主要组件。在提供的代码段中，首先定义了一个包含七个列的表格，每个列都有自己的文本标题。例如，`text:'行号'`定义了第一列的标题。接着，`Ext.window.Window`被用来创建一个窗口，这个窗口包含了之前定义的表格，并设置了窗口的大小、布局（`layout:'fit'`确保表格适应窗口的大小）。 在实际应用中，本地数据通常存储在JSON格式中，然后通过JavaScript对象或数组加载到表格中。然而，在这段代码中，本地数据并没有直接展示，这通常是后续步骤，可能涉及到从服务器获取数据后动态填充表格。如果要显示本地数据，可以使用`store`属性，定义一个`Ext.data.Store`实例，然后将数据源绑定到`store`。 对于跨域数据的处理，ExtJS支持使用`proxy`配置来处理Ajax请求。在跨域请求中，通常需要设置`crossDomain: true`和`useDefaultXhrHeader: false`。另外，服务器端也需要配置允许跨域访问（CORS）。例如，对于JSONP（JSON with Padding）这种跨域数据获取方式，需要在`proxy`中配置`type: 'jsonp'`，并提供回调函数名（`callbackParam`）。 总结来说，此资源主要讲解了如何使用ExtJS创建一个简单的表格，展示了基本的表格定义和窗口展示。同时，虽然没有深入讨论，但提到了处理跨域数据的概念，这是Web开发中常见的需求，特别是在进行前后端分离的应用开发时。要完全实现显示本地和跨域数据的功能，还需要了解和掌握ExtJS的数据模型（Model）、存储（Store）和代理（Proxy）机制，以及服务器端的CORS配置。