EXT中的代理Proxy初步
我们这里先初步理解代理：Proxy
1）先看lesson03.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- 导入Ext JS必需的CSS样式单 -->
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<!-- 导入Ext JS必需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-all.js">
</script>
<!-- 导入Ext JS国际化所需的JavaScript库 -->
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
</script>
<script type="text/javascript" src="proxy.js">
</script>
</head>
<body>
This is my JSP page. <br>
</body>
</html>
</pre><pre name="code" class="java">这里需要注意的是：<pre name="code" class="java"> <script type="text/javascript" src="proxy.js">
接下来我们看proxy.js内容：
(function(){
Ext.onReady(function(){
Ext.define("person",{
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'auto'},
{name: 'age', type: 'int'},
{name: 'email',type: 'auto'}
],
proxy:{
type:'ajax',
url:'proxy.jsp'
}
});
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
alert(record.data.name);
},
callback: function(record, operation) {
//do something whether the load succeeded or failed
}
});
})
})();
这里梳理一下这个js文件
我们在JS中创建了一个模型类person
如果说没有创建对象p及之后的类容，仅仅在代码
proxy:{
type:'ajax',
url:'proxy.jsp'
}
处就结束的话，客户端访问lesson03.jsp页面的时候，是不会请求访问proxy.jsp的
代理需要三方面内容：代理类（给谁代理） 代理对象 代理方法
如果用了代理，必然对象
var p = Ext.ModelManager.getModel('person');
</pre><pre name="code" class="javascript">就必须使用一个.load（）加载。
</pre><pre name="code" class="javascript">下面我们看看代理的内容：（也就是从后台取得内容）proxy.jsp
</pre><pre name="code" class="javascript"><pre name="code" class="java"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
response.getWriter().write("{name:'uppcat.com',age:25,email:'[email protected]'}");
%>
我们需要注意这些代码：
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
}
});
其中：1其实是一个id，代表是一个键，一条记录号
然后：返回的是record对象，是一个Object，那么通过它可以返回很多东西：
</pre><pre name="code" class="javascript">这里又有一个小技巧了：有人问怎么有一个data去取值，实际上学习EXT就是不断地调试和猜的过程，注意学会打断点就行了。
这里还有个问题需要注意一下：response.getWriter().write("{name:'uppcat.com',age:25,email:'[email protected]'}");
这行代码中，书写的时候一定要知道这是通过JSON写的JSON串，也必须是JSON串，我们可以再前台查看返回响应的结果就是JSON串。