本地讀取數據
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文件,再讀?。?br />
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
開機 閱讀(410)
評論(0) 編輯 收藏 所屬分類:
js