<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script src="ExtJs/ext-base.js" type="text/javascript"></script>
<script src="ExtJs/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">...
<!--
//数据源为数组的ArrayReader
一. function ArrayData()
...{
//定义数组
var arr=[ [ 'Bill', 'Gardener',1],['Ben', 'Horticulturalist',2]];
var reader = new Ext.data.ArrayReader(
//以第一个元素做为recordid,这个是必须得要的
...{id: 2},
//定义数组到record的映射关系
//name:属性名称
//mapping:映射到数据源的序列，即索引
[
...{name: 'name', mapping: 0},//对应字符:Bill
...{name: 'metier', mapping: 1},//对应字符:Gardener
...{name: 'id',mapping:2}//对应数字:1,如果第一个元素定义，则可以省略
]
);
//生成元数据
var data=reader.readRecords(arr);
var str="";
for(var i=0;i<data.records.length;i++)
...{
//标识列 保存的数组被转换为对象 Json数据
str = str.concat(
" totalRecords:"+data.totalRecords +//数据总条数
" ID:"+data.records[i].id +
" Data: .id="+data.records[i].data.id +
" Data: .name="+data.records[i].data.name +
" Data: .metier="+data.records[i].data.metier +
" json:"+data.records[i].json+" ");
}
alert(str);
}
二. function JsonData()
...{
var json=...{ 'results': 2, //设定此对象的总个数,与rows数组长度一致，需要手动设定
'rows': [
...{ id: 1, name: 'Bill', metier: 'Gardener' },
...{ id: 2, name: 'Ben', metier: 'Horticulturalist' }
]
};
var reader=new Ext.data.JsonReader(
...{
totalProperty: "results",//totalRecords属性由json.results得到(省略此参数也能得到总条数)
root: "rows", //构造元数据的数组由json.rows得到
id: "id" //id由json.id得到
},[
...{name:'id',mapping:'id'},
...{name: 'name', mapping: 'name'},
...{name: 'metier'} //如果name与mapping同名,可以省略mapping
]
)
var data=reader.readRecords(json);
var str="";
for(var i=0;i<data.records.length;i++)
...{
//标识列 保存的数组被转换为对象 Json数据
str = str.concat(
" totalRecords:"+data.totalRecords +//数据总条数
" ID:"+data.records[i].id +
" Data: .id="+data.records[i].data.id +
" Data: .name="+data.records[i].data.name +
" Data: .metier="+data.records[i].data.metier +
" json:"+data.records[i].json+" ");
}
alert(str);
}
三. function XmlData()
...{
var str=["<?xml version="1.0" encoding="utf-8" ?>",
"<dataset>",
"<results>2</results>",
"<row>",
"<id>1</id>",
"<name>Bill</name>",
"<occupation>Gardener</occupation>",
"</row>",
"<row>",
"<id>2</id>",
"<name>Ben</name>",
"<occupation>Horticulturalist</occupation>",
"</row>",
"</dataset>"].join("");
//生成xmldocument对象
var xmlDocument;
if(Ext.isIE)...{
xmlDocument = new ActiveXObject("Msxml2.FreeThreadedDOMDocument")
xmlDocument.async=false;
xmlDocument.resolveExternals = false;
xmlDocument.loadXML(str)
}
else...{
xmlDocument = (new DOMParser()).parseFromString(str, "text/xml");
}
//然后开始...和其它两个reader一样的用法,只是这儿换了一种写法,recordtype也可以是一个record对象
//record对象的属性映射
var record = Ext.data.Record.create([
...{name: 'name', mapping: 'name'}, // "mapping" property not needed if it's the same as "name"
...{name: 'metier',mapping:'occupation'}, // This field will use "occupation" as the mapping.
...{name:'id'}
])
var reader = new Ext.data.XmlReader(...{
totalRecords: "results",
record: "row", //row是节点选择器
id: "id"
}, record);
var data=reader.readRecords(xmlDocument);
var outstr="";
for(var i=0;i<data.records.length;i++)
...{
//标识列 保存的数组被转换为对象 Json数据
outstr = outstr.concat(
" totalRecords:"+data.totalRecords +//数据总条数
" ID:"+data.records[i].id +
" Data: .id="+data.records[i].data.id +
" Data: .name="+data.records[i].data.name +
" Data: .metier="+data.records[i].data.metier +
" json:"+data.records[i].json+" ");
}
alert(outstr);
}
//-->
</script>
</head>
<body>
<input id="Button1" onclick="ArrayData()" type="button" value="数组源数据" />
<input id="Button2" onclick="JsonData()" type="button" value="Json源数据" />
<input id="Button3" onclick="XmlData()" type="button" value="XML源数据" />
</body>
</html>
相关推荐
extjs desktop实例(个人/家庭收支系统)第2部分
增加了部分统计和分析导出数据功能 针对有些朋友不知道怎么运行： 你只有把数据库建好连接好 就运行 indeEXT.jsp 就可以进行一步一步进行浏览 可以进行查看逻辑
extjsdesktop +java 实例 完整
OK...完事了。。感谢大家对小弟的信任。。有啥好的书名可以评论给我。。到时候我找给你
请下： （个人/家庭收支管理系统）第2版 ... 月收入数据分析 月支出数据分析 年支出分析 年收入分析 增删查改 统计总收入与支出 按时间查询 等功能 还有个user表 有ID USERNAME PASSWORD 3个字段
总共3个文件。。绝对物有所值。。15分能下载到一本超值的书。。关注我其他上传。。共3个。。绝对辛苦分
在CDH使用oozie 的时候需要安装ext-...我用之前的ext版本 当只有一页数据时，页码导航不会灰色，换成ext2.2就正常了。页码导航条中的刷新按钮也有小变化。 另外界面美化了很多。Ext.form.ComboBox 的样式就很漂亮！
Extjs+springmvc登录注册，分页，sqlserver08
ExtJs + api + 笔记 + 完整包
extjs读取解析后端json格式数据并显示条形图,非常好看的特效，只能用炫酷来形容，感兴趣就下载看看吧，用在自己的网站觉得吸引眼球！
总共3个文件。这是第二个。绝对物有所值。。15分能下载到一本超值的书。。关注我其他上传。。共3个。。绝对辛苦分
DataReader、JsonReader、XmlReader的构造方法,需要的朋友可以参考下。
licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得...要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方网站下载,网址:http://extjs.com/products/extjs/download.php
对ExtJS的TabPanel加载带js的iframe页提供支持 extjs load once提供支持 extjs 面板间消息传递提供支持。。 <br>资源整理自extjs论坛，修正了里面的链接和异常，直接部署到extjs2.1的example底下就可以 ...
extjs中文解决方案/Eclipse下的js和ext开发 内容： 1. <script type="text/javascript" src="<%=contextPath%>/public/js/ext-base.js"></script> 2. <script type="text/javascript" src="<%=contextPath%>/public...
extjs数据存储与传输详解,为了方便大家学习ExtJs技术,特总结了ExtJs最常用的Store部分内容,供大家参考...
使用ExtJs获取后台json格式的数据必须的七个jar包，commons-beanuti-1s-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-logging-1.0.4.jar，ezmorph-1.0.4.jar，json-lib-2.1.jar，...
EXTJS 3.04包/中文版API/入门学习资料