`
编程足球
  • 浏览: 257925 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

Ext.data.XmlReader 的基本用法

    博客分类:
  • Ext
阅读更多
xmlData.xml文件:
  <?xml version="1.0" encoding="utf-8"?>
  <Items>
   	<Item>
	    <id>1</id>
		<name>测试1</name>
		<count>1</count>
	 	<lasttime>01/28/2011</lasttime>
		<type>配置指导 </type>

   	</Item>
   	<Item>
	    <id>2</id>
		<name>测试2</name>
		<count>2</count>
	 	<lasttime>11/28/2011</lasttime>
		<type>配置指导 </type>
   	</Item>
   	<Item>
	    <id>3</id>
		<name>测试3</name>
		<count>3</count>
	 	<lasttime>11/28/2011</lasttime>
		<type>配置指导 </type>
   	</Item>
  </Items>




读取xml数据的脚本文件 XmlReader_Array.js:
  /**
 * 使用xml文件保存数据
 */
var mxlStore_array = new Ext.data.Store({
        
        proxy : new Ext.data.HttpProxy({url: 'js/xmlData.xml'}),
        reader: new Ext.data.XmlReader({
//        		该属性是指定包含所有行对象的数组。
               	record: 'Item',  
               	
//      		该属性是指定每一个行对象中究竟哪一个是记录的ID字段(可选的)。
               	id:'id'
             },
             [          
                {name: 'name',   type: 'string', mapping:'name'},
                {name: 'count',  type: 'int',    mapping:'count'},
                {name: 'type',   type: 'string', mapping:'type'},             
                {name: 'date',   type: 'date',   mapping:'lasttime',dateFormat: 'm/d/Y'},
            ]),
           sortInfo:{field:'date',direction:'asc'}
    });
	mxlStore_array.load();
	grid_xml_array = new Ext.grid.GridPanel({
	    
        autoScroll:true,
        border: true,
        store:mxlStore_array,
        stripeRows:true,
//        自动创建列模型(ColumnModel)的数组,即每列要显示的内容
        columns: [
        	{
		        header: '文档名称',
		        dataIndex: 'name',
				sortable:true,
		        width: 300
	   		},{
		        header: '更新次数',
		        dataIndex: 'count',
				sortable:true,
		        width: 100
	     	},{
		        header: '最近更新时间',
		        dataIndex: 'date',
				sortable:true,
		        width: 150,
		        type: 'date'
	    	},{
		        header: '类型',
		        dataIndex: 'type',
				sortable:true,
		        width: 100
	    	}],
			sm: new Ext.grid.RowSelectionModel({singleSelect: true})
    });




或者使用另外一种方法XmlReader_Object.js:
  /**
 * 生成一个构造函数,该函数能产生符合规定的Record对象。
 */
var docData = new Ext.data.Record.create(
		 	[  
                {name: 'name',   type: 'string', mapping:'name'},
                {name: 'count',  type: 'int',    mapping:'count'},
                {name: 'type',   type: 'string', mapping:'type'},             
                {name: 'date',   type: 'date',   mapping:'lasttime',dateFormat: 'm/d/Y'},
            ]
		);
		
/**
 * Store类封装了一个客户端的Record对象的缓存, 
 * 为诸如GridPanel、ComboBox和DataView等的小部件提供了数据的入口。
 */
var mxlStore_Obj = new Ext.data.Store({
        proxy : new Ext.data.HttpProxy({url: 'js/xmlData.xml'}),
        reader: new Ext.data.XmlReader(
//        		元数据配置参数。
	        	{
//	       			该属性是指定包含所有行对象的数组。
	               	record: 'Item',  
//	      			该属性是指定每一个行对象中究竟哪一个是记录的ID字段(可选的)。
	               	id:'id'
	             },
					docData
			),
           sortInfo:{field:'date',direction:'asc'}
    });
	mxlStore_Obj.load();

/**
 * 定义一个测试的表
 */
	grid_xml_obj = new Ext.grid.GridPanel({
	    
        autoScroll:true,
        border: true,
        store:mxlStore_Obj,
        stripeRows:true,
//      自动创建列模型(ColumnModel)的数组,即每列要显示的内容
      columns: [
        	{
		        header: '文档名称',
		        dataIndex: 'name',
				sortable:true,
		        width: 300
	   		},{
		        header: '更新次数',
		        dataIndex: 'count',
				sortable:true,
		        width: 100
	     	},{
		        header: '最近更新时间',
		        dataIndex: 'date',
				sortable:true,
		        width: 150,
		        type: 'date'
	    	},{
		        header: '类型',
		        dataIndex: 'type',
				sortable:true,
		        width: 100
	    	}],
			sm: new Ext.grid.RowSelectionModel({singleSelect: true})
    });


进行测试的html文件:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ext读取mxl文件测试.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">  
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>  
    <script type="text/javascript" src="ext-all.js"></script>      
  	<script type="text/javascript" src="js/XmlReader_Array.js"></script>
  	<script type="text/javascript" src="js/XmlReader_Object.js"></script>
  	<script type="text/javascript">
  	    Ext.onReady(function(){
  	    	grid_xml_array.render("grid_array");
  	    	grid_xml_obj.render("grid_obj");
  	    });
	</script> 
  </head>
  <body>
    <div id="grid_array"></div>
    <div id="grid_obj"></div>
  </body>
</html>


分享到:
评论

相关推荐

    extjs帮助文档

    - `new Ext.data.XmlReader(readerConfig, recordType)`:创建一个新的XML读取器实例。 - `Ext.data.XmlReader.read(response, options)`:读取数据。 #### 三十五、Ext.data.Store类(第28页) - **概述**:Ext....

    extjs帮助文档pdf版

    - `Ext.data.XmlReader.read(response)`: 读取XML数据。 #### 35. Ext.data.Store 类 (P.28) - **概述**:用于存储和管理数据集。 - **常用方法**: - `Ext.data.Store.load(params, callback, scope)`: 加载数据...

    精通JS脚本之ExtJS框架.part1.rar

    6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小/定位”方法 6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 ...

    精通JS脚本之ExtJS框架.part2.rar

    6.3 元素常见的使用方法 6.3.1 常见的“显示/隐藏”方法 6.3.2 常见的“内容控制”方法 6.3.3 常见的“操控DOM”方法 6.3.4 常见的“尺寸大小/定位”方法 6.3.5 常见的“特效动画”方法 6.3.6 DomHelper简介 ...

    Ext+JS高级程序设计.rar

    8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...

    extjs学习资源

    这不仅有助于快速掌握框架的基本用法,还能帮助开发者深入理解框架的核心机制。 #### 二、Extjs核心API详解概述 - 根据提供的内容,我们可以看出该系列文章详细介绍了Extjs中的各种核心API,覆盖了从基础组件到高级...

    EXTJS___API详解

    EXTJS是一个强大的JavaScript框架,用于构建富客户端应用程序。其API详解涵盖了众多核心...EXTJS的API详尽且强大,这些只是其中一部分,实际使用中还有许多其他类和方法,为开发者提供了构建复杂Web应用的全面工具集。

    ExtJS增删改查

    reader: new Ext.data.XmlReader({ record: 'item' }, Record) }); ds.load(); grid.reconfigure(ds, cm); } ``` 2. **添加**: - 可以通过创建新的记录并将其插入到指定位置来实现添加操作: ```...

    extjs核心api详解.doc

    1. **EXT基础**:这部分涵盖了EXT的基本概念和用法,如EXT对象,它是EXTJS框架的入口点,提供全局方法和配置。 2. **Array/Date/Function/Number/String**:这些章节详细解释了EXT如何扩展JavaScript的基础类型,...

    extjs DataReader、JsonReader、XmlReader的构造方法

    - `recordType`: 这可以是一个Field定义对象数组,这个数组会被传递给`Ext.data.Record.create`来创建Record构造器,或者直接是一个已经使用`Ext.data.Record.create`创建的Record构造器。 内部关键的JavaScript...

    extjs tree 节点 链接 新窗口

    var store = new Ext.data.JsonStore({ url: 'link.ejf', totalProperty: 'results', root: 'rows', idProperty: 'id', fields: ['title', 'username', {name: 'loginTimes', type: 'int'}, {name: '...

    ext增删改查

    本文将深入探讨如何使用Ext JS来实现基本的数据增删改查(CRUD)操作,特别关注代码示例中的Store和GridPanel组件。 #### Store组件 在Ext JS中,`Store`是负责从服务器获取数据并存储这些数据的核心组件。通过...

    Extjs复习笔记(十九)-- XML作为tree的数据源

    XMLReader是Ext.data.reader.Reader的子类,它提供了处理XML数据的专门方法和配置选项。 创建XML数据源的第一步是定义一个Model,这将定义树结构中的每个节点的属性。例如,如果我们的XML节点包含`name`和`id`属性...

    Ext实现分页查询,前台

    数据读取器是`Ext.data.XmlReader`,它用于解析XML格式的服务器响应。`fields`定义了数据记录的属性,`mapping`属性指定了XML元素与数据字段的映射关系。在`load`事件中,对数据进行了处理,比如设置`typeImage`字段...

    Extjs深入浅出pdf

    1. **Ext.data**:EXTJS 的数据模块是其核心组件之一,它提供了一种在客户端和服务器之间管理、存储和传输数据的方法。这部分包括了对数据模型、存储和连接的定义。 2. **Ext.data.Connection**:这是EXTJS 中用于...

    Ext数据模型Store

    EXT提供了如`XmlReader`、`JsonReader`和`ArrayReader`等不同的Reader,它们能解析不同格式的数据,并将解析结果转化为Record对象,Record是数据集中的单条记录,包含一系列定义好的DataField,每个DataField定义了...

    EXTJS4之类系统和编码规范

    - **新的方式**:采用 ExtJS4 推荐的编码规范,如使用驼峰式命名法、避免使用特殊字符等。 ##### 实例 假设我们要创建一个名为 `MyCompany.data.CoolProxy` 的类,并实现一个用于处理 HTTP 请求的方法。根据 ExtJS...

    extjs代码小例子1-30集

    3. **数据模型与代理**:EXTJS的数据模型(如Ext.data.Model)负责表示应用程序的数据结构,而数据代理(如Store或AjaxProxy)则负责与服务器进行数据交互。通过这些,你可以实现数据的加载、保存、过滤和排序等功能...

    Extjs4_API文档

    - **避免使用Ext作为顶级命名空间**:不是由Sencha开发的类不应该使用 `Ext` 作为顶级命名空间。 - 示例:`Ext.data.JsonProxy` 而不是 `Ext.data.JSONProxy`。 ##### 2. 文件命名 - **类名与文件名对应**:每个...

Global site tag (gtag.js) - Google Analytics