随笔-26  评论-44  文章-20  trackbacks-0
本地读取数据
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

只有注册用户登录后才能发表评论。


网站导航: