Ext.data.XmlReader 的基本用法

编程足球

浏览: 251677 次
性别:
来自: 福州

最近访客更多访客>>

awerty3450p

hou3417202

cicr

eric_lee2019

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT XML 脚本 HTML

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>

分享到：

Spket 在 MyEclipse中安装 | Javascript核心——> 对象

2011-05-10 14:04
浏览 2319
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext.data.XmlReader 的基本用法

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext.data.XmlReader 的基本用法

评论

发表评论

相关推荐

Ext 右上角小图标 tool

Ext3.4源码之Store -> load() 与reload()

Ext3.4源码之Ext.apply()和 Ext.applyif()

ext-basex.js 进行Ext.Ajax.request 同步请求 FF无法正常

Ext 上传附件返回值 <pre>json</pre>格式,ff报错

extjs store中数据转换成json

view.getComputedStyle(div.firstChild.firstChild, null) is null

Ext Grid 横行滚动条

Ext.data.Store 小细节收集

Ext.Ajax.request 小问题收集

拼音输入法下输入字母Ext combo 无法进行过滤修正

Ext 2.x combo keyup事件无法响应

Ext Combo 添加空值并且显示出来

Ext Grid 小细节收集

Ext Panel 动态 加载 html

Ext 小错误整合

Ext ajax JSON 数据遍历

Ext.TreePanel 的小问题集合

jsp 进行下载时候乱码 ff正常，IE打开新页面

Ext 生成树递归算法

最近访客更多访客>>

Ext Panel 动态加载 html