jsp 中Ext 的“ 布局” 和“ 表单提交”“ 回填” 教程(继续1中的)
教程1:http://yonghengmoming.iteye.com/admin/blogs/1044942
5. 在左边编写树形目录
编写树目录首先要在 .jsp 文件的 body 中定义一个 div:
<div id="tree"></div>
接着在 .js 文件的 Ext.Viewport 之前 定义一个树:
var tree = new Ext.tree.TreePanel( {
// 隐藏根节点
rootVisible:false ,
el : 'tree'
});
var root = new Ext.tree.TreeNode({text:'all'});
var node1 = new Ext.tree.TreeNode({text:' 我是根的第一个枝子'});
var node11 = new Ext.tree.TreeNode({text:' 我是根的第一个枝子的第一个叶子'});
node1.appendChild(node11);
root.appendChild(node1);
tree.setRootNode(root);
tree.render();
root.expand(true , true );
接着在 west 的最后加上
,// 前一行加逗号不能忘记,否则不显示
items:tree
从浏览器就可以看到页面的树形目录, ext 的界面,美观方面没的说
三. 刚刚讲了 ext 的画界面,现在讲讲 ext 的事件和表单提交
事件
1. 打开刚刚写的“登入界面”的 .js 文件
2. 往按钮控件最后(就是这句“ text :" 登入",// 显示内容 ”后面)加上事件
listeners:{// 弹出事件
"click":function ()
{
Alert(“hello”);
}
}
记得再之前加上逗号,否则不显示,之后点击页面的按钮就会弹出 hello 了
或者加入下面事件
listeners:{// 弹出事件
"click":function ()
{
document.getElementsByName("mess")[0].value=" 名字 ";
}
}
修改 name 值为 mess 的控件的显示内容为:“名字”,就和页面普通的 javascript 的写法一样。
表单提交: .jsp 文件的表单提交需要搭建 Struts 框架,前面如果是自己新建一个 web 项目的朋友,这里就需要搭建 struts 框架了,毕竟用 struts 实现页面与后台的交互时最方便的。
搭建好 struts 之后:
1. 在 struts 的 struts.xml 文件中的 <struts></struts> 加上:
<!-- 这里之所以继承 json 是为了实现回填 -->
<package name="test" extends="json-default" namespace="/test">
<!-- 指向 action 类 -->
<action name="*" class="com.jeosoft.crm.module.test.action.TestAction" method="{1}">
<result type="json"></result>
<!-- <param name="includeProperties">success,message</param> -->
</action>
</package>
修改其中的 action 的 class 地址,指向后台 action
2.Action 中实例好对象和方法,不要漏了 get 、 set 方法
// 要继承 ServletRequestAware,ServletResponseAware 方法
public class TestAction implements ServletRequestAware,ServletResponseAware{
private String username;
private String password;
private int userid;
private long usercard;
private String jsonString;
private HttpServletRequest request;
private HttpServletResponse response;
public void loginAction() throws IOException{// 不要返回值,否则会报缺少右括号异常
username = "username:"+username; password = "password:"+password;
//json 拼写格式要正确,否则无法传回页面
this .setJsonString("{username:'"+username+"jiajia"+"',password:'"+password+"'}");
System.out .println(this .getJsonString());
response.getWriter().print(this .getJsonString()); // 以流的形式传回页面
response.setCharacterEncoding("UTF-8");
}
public UserBean getUserbean() {
return userbean;
}
public void setUserbean(UserBean userbean) {
this .userbean = userbean;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this .username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this .password = password;
}
public int getUserid() {
return userid;
}
public void setUserid(int userid) {
this .userid = userid;
}
public long getUsercard() {
return usercard;
}
public void setUsercard(long usercard) {
this .usercard = usercard;
}
public void setJsonString(String jsonString) {
this .jsonString = jsonString;
}
public String getJsonString() {
return jsonString;
}
public void setRequest(HttpServletRequest request) {
this .request = request;
}
public HttpServletRequest getRequest() {
return request;
}
public void setServletRequest(HttpServletRequest request) {
this .request=request;
}// 这两个方法要记得修改否则无法传回页面
public void setServletResponse(HttpServletResponse response) {
this .response=response;
}
}
3..js 文件的按钮控件后面添加提交事件
handler : function (obj) {
fp .form.doAction(
"submit",
{
url : "test/testTest",
method : "post",
failure : function (form, action) {
reader = Ext.util.JSON.decode(action.response.responseText);
document.getElementsByName("username")[0].value=reader.username;
document.getElementsByName("password")[0].value=reader.password;
}
});
}
以上,就实现了 for 表单的提交与回填。
看到这里,我想,大家对 EXT 就有了一定的了解了吧,不至于像纯粹挺理论一样抽象了