1.我们以AJAX的方式进行访问本地文件
Ext.Ajax.request({
url : "data/ext-jsb2.txt",
success : function(xhr) {
console.log(xhr.responseText);
},
failure : function(xhr) {
console.log("Error: " + xhr.statusText);
}
});
2.我们构造一个’inline data’进行json的访问。
var bookStore = Ext.create("Ext.data.Store", {
fields : [ "title", "author", "price" ],
data : {
library : [ {
title : "Zend Framework",
author : "Zend",
price : 49.99
}, {
title : "Beginning F#",
author : "Robert Pickering",
price : 44.99
}, {
title : "Pro Hadoop",
author : "Jason Venner",
price : 39.99
} ]
},
proxy : {
type : "memory",
reader : {
type : "json",
root : "library"
}
}
});
bookStore.each(function(record){
console.log(record.get("title") + ", " + record.get("author") + ", " + record.get("price"));
});
3.我们从一个存有json数据的文件中读出来转换为我们自己定义的model。
json文件：countries.txt
{
"countriesInEurope" : [
{"name":"Spain","capital":"Madrid"},
{"name":"France","capital":"Paris"},
{"name":"UK","capital":"London"},
{"name":"Denmark","capital":"Copenhagen"}
]
}
请求代码
Ext.onReady(function() {
/********* AJAX PROXY *********/
Ext.define("Country", {
extend: "Ext.data.Model",
fields: ["name", "capital"]
});
var ajaxProxy = Ext.create("Ext.data.proxy.Ajax", {
url: "data/countries.txt",
model: "Country",
reader: {
type: "json",
root: "countriesInEurope"
}
});
/* read */
var readOperation = Ext.create("Ext.data.Operation", {
action: "read"//read create destrory update
});
ajaxProxy.read(readOperation, function(src) {
var recordsArray = src.getRecords();
for(var i=0; i<recordsArray.length; i++) {
var record = recordsArray[i];
console.log(record.get("name") + ", " + record.get("capital"));
}
});
});
4.本地AJAX，封装为model，存于store
本地servlet返回的json数据
{
"results": [
{
"name": "kute",
"latest": "beijing"
},
{
"name": "why",
"latest": "nanyang"
}
]
}
JsonServlet.java：用于返回上述json数据
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter writer = response.getWriter();
response.setContentType("application/json; charset=utf-8");
String json = "{\"results\":[{\"name\": \"kute\", \"latest\": \"beijing\"},
{\"name\": \"why\", \"latest\": \"nanyang\"}]}";
System.out.println(json);
writer.write(json);
}
请求代码
/**
* 本地AJAX
* 请求到的json封装为model,并存于store
*/
Ext.onReady(function() {
Ext.define("Book", {
extend : "Ext.data.Model",
fields: ["name", "latest"]
});
var ajaxStore = Ext.create("Ext.data.Store", {
model: "Book",
proxy : {
type : "ajax",
url : "JsonServlet",
reader : {
type : "json",
root : "results",
}
}
});
/**
* records: 返回的数据
* options:
* success: 获取是否成功
*/
ajaxStore.load({
callback : function(records, options, success) {
if (success) {
for (var i = 0; i < records.length; i++) {
console.log(records[i].get("name") + ", " + records[i].get("latest"));
}
}
}
});
});
在firebug中查看请求url:
http://localhost:8080/orderwhy/JsonServlet?_dc=1397900046494&page=1&start=0&limit=25
5.本地以jsonp的形式进行AJAX访问，封装为model，存于store
本地servlet返回的数据：
Ext.data.JsonP.callback1({
"results": [
{
"name": "kute",
"latest": "beijing"
},
{
"name": "why",
"latest": "nanyang"
}
]
}
)
本地servlet代码，用于返回上述数据
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter writer = response.getWriter();
String callback = request.getParameter("callback");
if(null != callback && !"".equals(callback)) {
response.setContentType("application/json; charset=utf-8");
String json = "{\"results\":[{\"name\": \"kute\", \"latest\": \"beijing\"}, {\"name\": \"why\", \"latest\": \"nanyang\"}]}";
String re = callback + "(" + json + ")";
System.out.println(re);
writer.write(re);
}
}
请求代码
/**
* 跨域AJAX
* 请求到的json封装为model,并存于store
*/
Ext.onReady(function() {
Ext.define("Book", {
extend : "Ext.data.Model",
fields: ["name", "latest"]
});
var ajaxStore = Ext.create("Ext.data.Store", {
model: "Book",
proxy : {
type : "jsonp",
url : "JsonServlet",
reader : {
type : "json",
root : "results",
},
}
});
/**
* records: 返回的数据
* options:
* success: 获取是否成功
*/
ajaxStore.load({
callback : function(records, options, success) {
if (success) {
for (var i = 0; i < records.length; i++) {
console.log(records[i].get("name") + ", " + records[i].get("latest"));
}
}
}
});
});
在firebug中查看请求的url:
http://localhost:8080/orderwhy/JsonServlet?_dc=1397899157107&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1
其中，_dc为缓存key，可以自行设置（下例），Ext.data.JsonP.callback1是要回调的函数
6.跨域访问:
测试数据：
http://api.cdnjs.com/libraries
/**
* 跨域AJAX
* 请求到的json封装为model,并存于store
*/
Ext.onReady(function() {
Ext.define("Book", {
extend : "Ext.data.Model",
fields : [ {
name : "nameJ",
mappping : "name"
}, {
name : "latestJ",
mapping : "latest"
} ]
});
var ajaxStore = Ext.create("Ext.data.Store", {
model: "Book",
proxy : {
type : "jsonp",
url : "http://api.cdnjs.com/libraries",
reader : {
type : "json",
root : "results",
},
cacheString: "myCacheKey",
extraParams: {
param1: "value1",
param2: "value2"
},
noCache: true
}
});
/**
* records: 返回的数据
* options:
* success: 获取是否成功
*/
ajaxStore.load({
callback : function(records, options, success) {
if (success) {
for (var i = 0; i < records.length; i++) {
console.log(records[i].get("nameJ") + ", " + records[i].get("latestJ"));
}
}
}
});
});
在firebug中查看请求的url:
http://api.cdnjs.com/libraries?myCacheKey=1397899614316¶m1=value1¶m2=value2&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1
最后给推荐一本英文电子书：Practical Ext JS 4,非常好，Practical Ext JS 4
还有这本书上的一个关于MVC的一个例子：MVCwithExtJS4
