一、不傳URL
view plaincopy to clipboardprint?
var myData={ "Head":[
{ "UserName":"admin","Name":"李亞斌","Gender":"M","Password":"123456","Status":"0","Department":"技術(shù)部","Title":"程序員","Email":" 0:00:00","ModifyUser":"1","ModifyTime":"2009-10-30 10:04:22"},
{ "UserName":"00001","Name":"李香蘭","Gender":"F","Password":"123456","Status":"0","Department":"技術(shù)部","Title":"程序員","Email":" 0:00:00","ModifyUser":"","ModifyTime":""}
]
}
var ds = new Ext.data.Store({
//proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.JsonReader({root: 'Head'},
[{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
ds.loadData(myData)
或者
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.JsonReader({root: 'Head'},
[{name:'UserName'},{name: 'Name'}, {name:'Gender'},{name:'Password'},{name:'Status'},{name:'Department'},{name:'Title'},{name:'Email'},{name:'OfficePhone'}])
});
//注意下面這句 切記
ds.load()都可以
二、使用URL
(1)JSON HTMLPage.htm頁(yè)面做數(shù)據(jù)源
{"Head":[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]}
{"Head":[{"appeId":"1","survId":"1","location":"","surveyDate":"2008-03-14","surveyTime":"12:19:47","inputUserId":"1","inputTime":"2008-03-14 12:21:51","modifyTime":"0000-00-00 00:00:00"},{"appeId":"2","survId":"32","location":"","surveyDate":"2008-03-14","surveyTime":"22:43:09","inputUserId":"32","inputTime":"2008-03-14 22:43:37","modifyTime":"0000-00-00 00:00:00"},{"appeId":"3","survId":"32","location":"","surveyDate":"2008-03-15","surveyTime":"07:59:33","inputUserId":"32","inputTime":"2008-03-15 08:00:44","modifyTime":"0000-00-00 00:00:00"},{"appeId":"4","survId":"1","location":"","surveyDate":"2008-03-15","surveyTime":"10:45:42","inputUserId":"1","inputTime":"2008-03-15 10:46:04","modifyTime":"0000-00-00 00:00:00"},{"appeId":"5","survId":"32","location":"","surveyDate":"2008-03-16","surveyTime":"08:04:49","inputUserId":"32","inputTime":"2008-03-16 08:05:26","modifyTime":"0000-00-00 00:00:00"},{"appeId":"6","survId":"32","location":"","surveyDate":"2008-03-20","surveyTime":"20:19:01","inputUserId":"32","inputTime":"2008-03-20 20:19:32","modifyTime":"0000-00-00 00:00:00"}]}
相應(yīng)的ext代碼
Ext.onReady(function(){
var proxy=new Ext.data.HttpProxy({url:'HTMLPage.htm'});
//定義reader
var reader=new Ext.data.JsonReader({ root:'Head' },
[
{name: 'appeId', mapping: 'appeId'},
{name: 'survId'},
{name: 'location'},
{name: 'surveyDate'},
{name: 'surveyTime'},
{name: 'inputUserId'}
]
)
//構(gòu)建Store
var store=new Ext.data.Store( {
proxy:proxy,
reader:reader
});
//載入
store.load();
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
{header: "survId", width: 60, dataIndex: 'survId', sortable: true},
{header: "location", width: 60, dataIndex: 'location', sortable: true},
{header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
{header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
{header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
],
renderTo:'example-grid',
width:540,
height:200
});
});
(2).如果json 數(shù)據(jù)中 沒有數(shù)據(jù)標(biāo)題"Head“只需要把reader改成 如下即可：其他不需要改變
view plaincopy to clipboardprint?
//定義reader
var reader=new Ext.data.JsonReader({},
[
{name: 'appeId', mapping: 'appeId'},
{name: 'survId'},
{name: 'location'},
{name: 'surveyDate'},
{name: 'surveyTime'},
{name: 'inputUserId'}
]
)
經(jīng)驗(yàn)小技巧：傳data 的URL文件可為，html,aspx.js等，文件引用的js永遠(yuǎn)和 文件在同一路徑。
另外主要注意一下 HttpProxy 和MemoryProxy的區(qū)別，細(xì)心的讀者可以看到 以上兩種方法 使用的proxy使用的不同
MemoryProxy
MemoryProxy只能從JavaScript對(duì)象獲得數(shù)據(jù)，可以直接把數(shù)組，或JSON和XML格式的數(shù)據(jù)交給它處理，如下面的代碼所示。
var proxy = new Ext.data.MemoryProxy([
['id1','name1','descn1'],
['id2','name2','descn2']
]);
HttpProxy
HttpProxy使用HTTP協(xié)議，通過Ajax去后臺(tái)取數(shù)據(jù)，構(gòu)造它時(shí)需要設(shè)置url:'xxx.jsp'參數(shù)。這里的url可以替換成任何一個(gè)合法的網(wǎng)址，這樣HttpProxy才知道去哪里獲取數(shù)據(jù)，如下面的代碼所示。
var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
后臺(tái)需要返回EXT所需要的JSON格式的數(shù)據(jù)，下面的內(nèi)容就是后臺(tái)使用JSP的一個(gè)范例，如下面的代碼所示。
response.setContentType("application/x-json");
Writer out = response.getWriter();
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
請(qǐng)注意，這里的HttpProxy不支持跨域，它只能從同一域中獲得數(shù)據(jù)。如果想跨域，請(qǐng)參考下面的ScriptTagProxy。
ScriptTagProxy
ScriptTagProxy的用法幾乎和HttpProxy一樣，如下面的代碼所示。
var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
從這里也看不出來它是如何支持跨域的，我們還需要在后臺(tái)進(jìn)行相應(yīng)的處理，如下面的代碼所示
String cb = request.getParameter("callback");
response.setContentType("text/javascript");
Writer out = response.getWriter();
out.write(cb + "(");
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
out.write(");");
其 中的關(guān)鍵就在于從請(qǐng)求中獲得的callback參數(shù)，這個(gè)參數(shù)叫做回調(diào)函數(shù)。ScriptTag- Proxy會(huì)在當(dāng)前的HTML頁(yè)面里添加一個(gè)<script type="text/javascript"src="/xxx.jsp"> </script>標(biāo)簽，然后把后臺(tái)返回的內(nèi)容添加到這個(gè)標(biāo)簽中，這樣就可以解決跨域訪問數(shù)據(jù)的問題。為了讓后臺(tái)返回的內(nèi)容可以在動(dòng)態(tài)生成的 標(biāo)簽中運(yùn)行，EXT會(huì)生成一個(gè)名為callback的回調(diào)函數(shù)，并把回調(diào)函數(shù)的名稱傳遞給后臺(tái)，由后臺(tái)生成callback(data)形式的響應(yīng)內(nèi)容， 然后返回給前臺(tái)自動(dòng)運(yùn)行。