一、不傳URL
view plaincopy to clipboardprint?
var myData={ "Head":[
{ "UserName":"admin","Name":"李亞斌","Gender":"M","Password":"123456","Status":"0","Department":"技術部","Title":"程序員","Email":" 0:00:00","ModifyUser":"1","ModifyTime":"2009-10-30 10:04:22"},
{ "UserName":"00001","Name":"李香蘭","Gender":"F","Password":"123456","Status":"0","Department":"技術部","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頁面做數據源
{"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"}]}
相應的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'}
]
)
//構建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 數據中 沒有數據標題"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'}
]
)
經驗小技巧：傳data 的URL文件可為，html,aspx.js等，文件引用的js永遠和 文件在同一路徑。
另外主要注意一下 HttpProxy 和MemoryProxy的區別，細心的讀者可以看到 以上兩種方法 使用的proxy使用的不同
MemoryProxy
MemoryProxy只能從JavaScript對象獲得數據，可以直接把數組，或JSON和XML格式的數據交給它處理，如下面的代碼所示。
var proxy = new Ext.data.MemoryProxy([
['id1','name1','descn1'],
['id2','name2','descn2']
]);
HttpProxy
HttpProxy使用HTTP協議，通過Ajax去后臺取數據，構造它時需要設置url:'xxx.jsp'參數。這里的url可以替換成任何一個合法的網址，這樣HttpProxy才知道去哪里獲取數據，如下面的代碼所示。
var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
后臺需要返回EXT所需要的JSON格式的數據，下面的內容就是后臺使用JSP的一個范例，如下面的代碼所示。
response.setContentType("application/x-json");
Writer out = response.getWriter();
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
請注意，這里的HttpProxy不支持跨域，它只能從同一域中獲得數據。如果想跨域，請參考下面的ScriptTagProxy。
ScriptTagProxy
ScriptTagProxy的用法幾乎和HttpProxy一樣，如下面的代碼所示。
var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
從這里也看不出來它是如何支持跨域的，我們還需要在后臺進行相應的處理，如下面的代碼所示
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(");");
其 中的關鍵就在于從請求中獲得的callback參數，這個參數叫做回調函數。ScriptTag- Proxy會在當前的HTML頁面里添加一個<script type="text/javascript"src="/xxx.jsp"> </script>標簽，然后把后臺返回的內容添加到這個標簽中，這樣就可以解決跨域訪問數據的問題。為了讓后臺返回的內容可以在動態生成的 標簽中運行，EXT會生成一個名為callback的回調函數，并把回調函數的名稱傳遞給后臺，由后臺生成callback(data)形式的響應內容， 然后返回給前臺自動運行。