再来个类
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1
/**//*XmlGrid samples*/
2
3XmlGrid = function(config)
{
4
config = config || {};
5
6 this.cm = new Ext.grid.ColumnModel([
7 { header:'id' , dataIndex:'id' },
8 { header:'name' , dataIndex:'name' },
9 { header:'sex' , dataIndex:'sex' }
10 ]);
11
12 this.store = new Ext.data.Store({
13 url:'data.xml',
14 reader: new Ext.data.XmlReader({
15 record:'item',
16 id:'id',
17 totalRecords:'@total'
18
19
},[
20 {name:'id',mapping:'id'},
21 {name:'name',mapping:'name'},
22 {name:'sex',mapping:'sex'}
23 ])
24 });
25
26 this.store.load();
27
28 Ext.applyIf(config,{
29 width:400,
30 height:200,
31 frame:true,
32 border:true
33 });
34
35 XmlGrid.superclass.constructor.call(this,config);
36
}
37
38Ext.extend(XmlGrid,Ext.grid.GridPanel,{});
39
40
41Ext.onReady(function(){
42 var xmlgrid = new XmlGrid();
43 xmlgrid.render('xml_main')
44});
渲染页面
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JsonGrid</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../grid/XmlGrid.js"></script>
</head>
<body>
<div id="xml_main"></div>
</body>
</html>
分享到：
相关推荐
在EXT JS框架中，"ext 读取xml 可编辑grid"是一个常见的需求，涉及到的主要知识点包括EXT的数据对象、EditorGridPanel的使用以及EXT对XML数据格式的支持。下面将详细阐述这些内容。 EXT JS是一个强大的JavaScript库...
同时配置了XML数据读取器，用于解析返回的XML数据。 3. **检测加载状态**： ```javascript function storeIsLoading() { if (xmlStore.isLoading()) { window.setTimeout(function () { storeIsLoading(); },...
`Ext.data.reader.Xml`是Ext.js中的一个阅读器，专门设计用来解析XML数据。阅读器的主要任务是从服务器返回的数据中提取字段值，并将这些值映射到模型实例上，以便`Store`能够理解并处理它们。 首先，我们需要创建...
要将XML数据转化为EXT树形菜单，我们需要完成以下步骤： 1. **解析XML**：EXT提供了一个名为`Ext.data.XmlReader`的类，用于从XML文档中读取数据。你需要定义reader的配置，包括XML的根节点和数据节点的标识符。...
在Ext2.0中，虽然不常用XML作为数据传输格式，但如果需要，可以使用Ajax请求加载XML数据，然后解析并显示在界面上。 总结，Java与Ext2.0的数据交互涉及到前后端的配合，Java负责处理业务逻辑和数据持久化，Ext2.0则...
总结来说，Ext.data是Ext_JS框架中处理数据的核心部分，它提供了强大的数据存储、读取和传输能力。通过灵活的Store、Reader和Proxy机制，开发者可以轻松地从各种数据源获取数据并呈现给用户。同时，Ext.data....
在"Ext JS的table设计实例"中，我们主要关注的是如何利用Ext JS来设计功能丰富的表格组件，包括表格的可编辑性、可排序性以及如何从XML数据源中读取并显示数据。 首先，Ext JS中的表格组件（`Ext.grid.Panel`或现代...
在IT领域，特别是Web开发中，Ext Grid是一个广泛使用的组件，用于展示和管理大量数据。它提供了丰富的功能，包括排序、筛选、分页等，使得数据的交互和操作变得非常便捷。当我们需要将Ext Grid中的数据导出为Excel...
总结来说，这个示例涵盖了Ext JS表单设计、XML数据绑定、GridPanel组件使用以及可能的数据库交互。通过学习和实践这个示例，开发者可以深入了解如何在Web应用中创建动态、交互式的数据展示界面。
对于远程数据，通常会使用Ajax请求（DWR或者Ext.Ajax）从服务器获取JSON或XML格式的数据。 更新（Update）：当用户修改了数据，Store会自动检测到这些变化。调用`sync()`方法会将更新后的数据发送回服务器，后台...
在Ext JS中，XML数据的读取通常通过`Ext.data.XmlReader`类来实现，它是一个数据读取器，能够将XML数据转换为JavaScript对象，这些对象可以被Ext的数据存储（如`Ext.data.Store`）进一步处理和显示。在本文中，我们...
FormPanel 则用于创建和更新数据，它可以与后台数据库进行数据交换，通过 Form 的 Submit 或 Load 方法实现数据的保存和读取。 **Drag 功能** EXT.NET 1.x 提供了拖放（Drag & Drop）功能，允许用户通过鼠标操作将...
3. **Data Package**：数据包包含了数据模型、数据存储和数据读取接口，用于处理和展示后端数据。EXT的数据绑定机制使得数据与视图之间的同步变得简单。 4. **Layouts**：EXT的布局管理器负责管理组件的尺寸和位置...
通过Store组件，EXT 3.3 可以轻松处理大量数据的存储和操作，同时支持远程数据源，如JSONP和XML。 文件“Ext 3.3 中文.CHM”中可能包含了以下内容： 1. 组件（Components）：详述EXT 3.3中的各种组件，如Panel、...
1. **创建Excel文件**：EXT Grid导出Excel通常通过创建一个Excel文件的XML格式（.xls或.xlsx）来实现。这可以通过使用第三方库如SheetJS（js-xlsx）来完成。SheetJS提供了读取、写入和操作Excel文件的强大API。 2. ...
Ext JS提供了Ajax组件（如`Ext.Ajax`）来发送HTTP请求，处理JSON或XML数据，实现CRUD（创建、读取、更新、删除）操作。通过构建适当的请求和响应处理器，可以轻松实现与后端数据库的交互。 3. **示例代码**： - `...
Store是Ext JS 4中用于管理数据集合的组件，它连接到数据源，并提供多种机制来读取和更新数据。Reader则是Store用来解析从服务器返回的数据格式（如JSON、XML等）的工具。 13. **Proxy和Writer** 在数据管理中，...
Model定义了数据对象的结构和行为，Proxy处理数据的读写操作，Reader和Writer则负责将数据转换为适合传输的格式。这些组件的组合使得Ext能够灵活地处理复杂的数据结构和API交互。 三、Render：渲染是Ext 3.0中的一...
- 使用`Ext.data.SimpleStore`创建一个数据存储对象，并加载示例数据。 - 创建一个GridPanel，并将其与数据存储关联起来。 ```javascript var store = new Ext.data.SimpleStore({ fields: [ {name: 'company...
XMLReader是Ext.data.reader.Reader的子类，它提供了处理XML数据的专门方法和配置选项。 创建XML数据源的第一步是定义一个Model，这将定义树结构中的每个节点的属性。例如，如果我们的XML节点包含`name`和`id`属性...