ext xml格式的小例子
编程技术 / houtizong 发布于 3年前 75
1.XML格式
a）hello.xml
<!---->
<dataset>
??<row>
????<id>1</id>
????<name>EasyJWeb</name>
????<organization>EasyJF</organization>
????<homepage>www.easyjf.com</homepage>
??</row>
??<row>
????<id>2</id>
????<name>jfox</name>
????<organization>huihoo</organization>
????<homepage>www.huihoo.org</homepage>
??</row>
??<row>
????<id>3</id>
????<name>jdon</name>
????<organization>jdon</organization>
????<homepage>www.jdon.com</homepage>
??</row>
??<row>
????<id>4</id>
????<name>springside</name>
????<organization>springside</organization>
????<homepage>www.springside.com.cn</homepage>
??</row>
</dataset>
b).GridPanel.html
<html>
?<head>
?<meta http-equiv="Content-Type" content="text/html;charset=" gb2312"="">
??
??<title>Extjs</title>
??<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
??<noscript type="text/javascript" src="../../adapter/ext/ext-base.js"></noscript>
??<noscript type="text/javascript" src="../../ext-all.js"></noscript>
??<noscript>
?
??? Ext.onReady(function(){
??? ????//用来定义要显示的数据
??? ???? var data = [[1,'EasyJWeb','EasyJF','www.easyjf.com'],
??? ???? ?????? [2,'jfox','huihoo','www.huihoo.org'],
??? ???? ?????? [3,'jdon','jdon','www.jdon.com'],
??? ???? ?????? [4,'springside','springside','www.springside.com.cn']];
??? ???? //用来创建一个数据存储（重要环节存储器Store用来负责把各种各样的数据转换成ExtJS 的数据记录集Record）
??? ???? var store = new? Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
??? ????
??? ???? //负责创建一个表格 表格 包含的列由columns配置属性来描述每一行数数据用来描述一列信息
??? ???? //表格的列信息 包含列头显示文本header
??? ???? //列对应的记录集字段 dataIndex
??? ???? //列是否可排序? sortable
??? ???? //列的渲染函数 render
??? ???? //宽度 width
??? ???? //格式化信息 format
??? ???/*? var grid = new Ext.grid.GridPanel({
??? ???? ??renderTo:"hello",
??? ???? ??title:"中国java开源产品",
??? ???? ??height:150,
??? ???? ??width:600,
??? ???? ??columns:[
??? ???? ?????? {header:"项目名称",dataIndex:"name"},
??? ???? ?????? {header:"开发团队",dataIndex:"organization"},
??? ???? ???????{header:"网址",dataIndex:"homepage"}],
??? ???? ??store:store,
??? ???? ??autoExpandColumn:2
??? ???? ???
??? ???? });*/
??? ???? var colM = new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
??? ???? ??????????????????? {header:"开发团队",dataIndex:"organization",sortable:true},
??? ???? ??????????????????? {header:"网址",dataIndex:"homepage",renderer:showUrl}
??? ???? ??????????????????? ]);
???????? var? grid = new Ext.grid.GridPanel({
???????? ?
???????? ??title:"中国java开源产品",
???????? ??height:150,
???????? ??width:600,
???????? ??cm:colM,
???????? ??store:store,
???????? ??autoExpandColumn:2
???????? });
????????
??? });?
???
???
???function showUrl(value){
?????return ""+value+"";
???}
???
???//xml格式
??? Ext.onReady(function(){
??? ????var store = new Ext.data.Store({
??? ??????url:"hello.xml",
??? ??????reader:new Ext.data.XmlReader({
??? ??????record:"row",id:"id"},
??? ??????["name","organization","homepage"])
??? ????});
??? ????? var ds = new Ext.data.Store({
??????????????? proxy: new Ext.data.HttpProxy({url: "hello.xml"}),
??????????????? reader: new Ext.data.XmlReader({record: "row", id: "id"},
??????????????????????????????????????????????? ['name', "organization", "homepage"])
??????????? ??});
??? ????var colM = new Ext.grid.ColumnModel([
??? ????{header:"项目名称",dataIndex:"name",sortable:true},
??? ????{header:"开发团队",dataIndex:"organization",sortable:true},
??? ????{header:"网址",dataIndex:"homepage",sortable:true}]);
??? ????var grid = new Ext.grid.GridPanel({
??? ????? renderTo:"aaa",
??? ????? title:"java开发团队",
??? ????? height:200,
??? ????? width:600,
??? ????? cm:colM,
??? ????? store:store,
??? ????? autoExpandColumn:2
??? ????});
??? ????store.load();
??? });
??????? //json格式
??? Ext.onReady(function(){
??? ???var? data = [ {id:1,name:'EasyJWeb',organization:'EasyJF',homepage:'www.easyjf.com'},
??? ??????????{id:2,name:'jfox',organization:'huihoo',homepage:'www.huihoo.org'},
??? ??????????{id:3,name:'jdon',organization:'jdon',homepage:'www.jdon.com'},
??? ??????????{id:4,name:'springside',organization:'springside',homepage:'www.springside.com.cn'}];
??? ???
??? ???var store = new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});
??? ???var colM = new Ext.grid.ColumnModel([??? {header:"项目名称",dataIndex:"name",sortable:true},
??? ???? ??????????????????? {header:"开发团队",dataIndex:"organization",sortable:true},
??? ???? ??????????????????? {header:"网址",dataIndex:"homepage",renderer:showUrl}
??? ???? ??????????????????? ]);
??????var grid = new Ext.grid.GridPanel({
??????? renderTo:"aaa",
??????? title:"中国java开源产品",
??????? height:200,
??????? width:600,
??????? cm:colM,
??????? store:store,
??????? autoExpandColumn:2
??????});??? ???? ???????????????????
??? });
??</noscript>
?</head>
?
?<body>
????
????
?</body>
</html>
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
