本地读取数据
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.org.cn'] ];
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]});
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
});
});
与服务器端交换(服务器端用servlet来处理读取和更新数据)
var store=new Ext.data.JsonStore({
url:"student.ejf?cmd=list",
root:"result",
fields:["id","name","email","bornDate"]});
得到的数据格式为:{results:[{id:1,
name:'小王',
email:'xiaowang@easyjf.com',
sex:'男',
bornDate:'1991-4-4'},
{id:1,
name:'小李',
email:'xiaoli@easyjf.com',
sex:'男',
bornDate:'1992-5-6'}
]
}
Store可以理解为数据存储器,可以理解为客户端的小型数据表,提供缓存等功能。在ExtJS中,GridPanel、ComboBox、DataView等控件一般直接与Store打交道,直接通过store来获得控件中需要展现的数据等
读数据时
record是指数据读取的格式
store 有几种读取数据的方法:
1,就是上面这种最简单的
2,将数据表示为一维数组的格式,然后用Ext.data.JsonStore来存贮
var data=[{id:1,
name:'EasyJWeb',
organization:'EasyJF',
homepage:'www.easyjf.com'},
{id:2,
name:'jfox',
organization:'huihoo',
homepage:'www.huihoo.org'}
];
var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]});
3,将数据表示为xml文件,再读取:
hello.xml
<?xml version="1.0" encoding="UTF-8"?>
<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>
</dataset>
读取程序:
var store=new Ext.data.Store({
url:"hello.xml",
reader:new Ext.data.XmlReader({
record:"row"},
["id","name","organization","homepage"])
});
4,向服务器端读取数据的时候,与3极为类似:
var store=new Ext.data.Store({
url:"student.ejf?cmd=list",
reader:new Ext.data.JsonReader({
root:"result"},
["id","name","organization","homepage"])
});
看看是不是和3中的读取程序相像,当然它还有进一步的简化:
var store=new Ext.data.JsonStore({
url:"student.ejf?cmd=list",
root:"result",
fields:["id","name","organization","homepage"]});
服务器端产生的数据输出是:
{results:[{id:1,
name:'小王',
email:'xiaowang@easyjf.com',
sex:'男',
bornDate:'1991-4-4'},
{id:2,
name:'小李',
email:'xiaoli@easyjf.com',
sex:'男',
bornDate:'1992-5-6'}
]
}
5,向服务器发送数据
function sFn()
{
alert('保存成功');
}
function fFn()
{
alert('保存失败');
}
Ext.Ajax.request({
url: 'student.ejf?cmd=save’
success: sFn
failure: fFn,
params: { name: '小李',email: ' xiaoli@easyjf.com',bornDate: ' 1992-5-6',sex: '男'}
});
posted on 2008-07-10 10:02
开机 阅读(400)
评论(0) 编辑 收藏 所属分类:
js