这次只是初步了解Proxy,分析一个实例
我们先看一下一个js文件:proxy.js
(function(){
<span style="white-space:pre"> </span> Ext.onReady(function(){
<span style="white-space:pre"> </span>Ext.define("person",{
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'auto'},
{name: 'age', type: 'int'},
{name: 'email',type: 'auto'}
],
proxy:{
<span style="white-space:pre"> </span>type:'ajax',
<span style="white-space:pre"> </span>url:'proxy.jsp'
}
<span style="white-space:pre"> </span>});
<span style="white-space:pre"> </span> var p = Ext.ModelManager.getModel('person');
p.load(1, {
scope: this,
failure: function(record, operation) {
//do something if the load failed
},
success: function(record, operation) {
//do something if the load succeeded
<span style="white-space:pre"> </span>alert(record.data.name);
},
callback: function(record, operation) {
//do something whether the load succeeded or failed
}
});
<span style="white-space:pre"> </span> })
})();
然后再看看一个jsp文件:Proxy.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
response.getWriter().write("{name:'uppcat.com',age:16,email:"wfc@163.com"}");
%>
这个JSP实际上是为前台提供数据的,这些数据可能是直接写的JSON字符串,也可能是从数据库中取出来的值。一定要注意他的书写格式。
在前台页面的时候加载proxy.js
<script type="text/javascript" src="proxy.js">
</script>
Ext.define("person",{
2)类的实例: var p = Ext.ModelManager.getModel('person');
3)创建实例后调用load()方法
var p = Ext.ModelManager.getModel('person');
我们看看这个函数load():
p.load(1, {
scope: this,
failure: function(record, operation) {
//do something if the load failed
},
success: function(record, operation) {
//do something if the load succeeded
alert(record.data.age);
},
callback: function(record, operation) {
//do something whether the load succeeded or failed
}
我们根据
Model创建类,然后我们用Ext.ModelManager.getModel('person');创建对应的实例,,查看Model类,用其中的load()方法来显示数据
这个load有点意思:我们可能不理解recod是什么东西,或者其它函数什么内容,这个时候就要学会在浏览器中debug
以后我们就可以在js中负责获取数据OK了,