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

本文深入介绍了使用Ext JS框架进行界面布局和表单提交的方法,包括如何在jsp文件中创建树形目录、事件处理以及通过Struts框架实现表单提交与回填。教程覆盖了从界面展示到事件响应的全过程,帮助开发者实现更高效、更美观的网页应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jspExt 布局 表单提交”“ 回填 教程(继续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.strutsstruts.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>

修改其中的 actionclass 地址,指向后台 action

2.Action 中实例好对象和方法,不要漏了 getset 方法

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值