jsp中Ext的“布局”和“表单提交”“回填”教程（2）

jsp 中Ext 的“ 布局” 和“ 表单提交”“ 回填” 教程（继续1中的）

教程1：http://yonghengmoming.iteye.com/admin/blogs/1044942

 doc版教程下载：51cto ,dbank ,115

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 就有了一定的了解了吧，不至于像纯粹挺理论一样抽象了