ExtJS常用表单操作

最新推荐文章于 2019-10-14 22:56:08 发布

whilelie

最新推荐文章于 2019-10-14 22:56:08 发布

阅读量816

点赞数

分类专栏： ExtJS 文章标签： extjs string function date layout object

本文链接：https://blog.csdn.net/whilelie/article/details/7596050

版权

ExtJS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.Demo.html

    <script type="text/javascript">
        var form1 = new Ext.form.FormPanel({
            width:450,
            frame: true,
            renderTo: Ext.getBody(),
            submit: function () {
                this.getEl().dom.action = "Result.aspx",
                this.getEl().dom.method = "POST",
                this.getEl().dom.submit()
            },
            title: "FormPanel",
            bodyStyle: "padding:5px",
            defaults: { width: 500, xtype: "textfield" },
            items: [{ 
                xtype: "fieldset",
                title: "个人信息",
                collapsible: true, 
                autoHeight: true,
                width: 330,
                defaults: { width: 150 },
                defaultType: "textfield",
                items: [
                { fieldLabel: "姓名", name: "name", id: "name" },
                { fieldLabel: "密码", name: "pass", id: "pass", inputType: "password" },
                { xtype: "panel", layout: "column", fieldLabel: "性别", 
                  isFormField: true,
                  items: [{
                      columnWidth: .5,
                      xtype: "radio",
                      boxLabel: "男",
                      name: "sex",
                      inputValue:"男"

                  }, { columnWidth: .5,
                      xtype: "radio",
                      boxLabel: "女",
                      name: "sex",
                        inputValue:"女"
                  }]},
                {xtype: "panel", layout: "column", fieldLabel: "爱好", isFormField: true,
                      items: [{
                          columnWidth: .5,
                          xtype: "checkbox",
                          boxLabel: "足球",
                          name: "hobbit",
                          inputValue: "足球"
                      }, { columnWidth: .5,
                          xtype: "checkbox",
                          boxLabel: "篮球",
                          name: "hobbit",
                          inputValue: "篮球"
                      }, { columnWidth: .5,
                          xtype: "checkbox",
                          boxLabel: "乒乓球",
                          name: "hobbit",
                          inputValue: "乒乓球"
                      }]
                  },
                  { xtype: "datefield", fieldLabel: "生日", anchor: "99%",name:"date" },
                  { xtype: "combo", name: "province", store: ["湖北省", "湖南省", "广东省"], fieldLabel: "省份:", emptyText: "请选择您所在省份" }

                  ]
            }],
            buttons: [{ text: "确定",formBind:true, handler: function () {
                form1.form.submit();//!!!
            }
        }, { text: "取消", handler: function () { form1.form.reset(); } }]
        });
    </script>

2.Result.aspx

protected void Page_Load(object sender, EventArgs e)
    {
        string name = Request.Form["name"];
        string pass = Request.Form["pass"];
        string sex = Request.Form["sex"];
        string hobbit = Request.Form["hobbit"];
        string date = Request.Form["date"];
        string province = Request.Form["province"];
        Response.Write("用户名:--->" + name + "<br/>");
        Response.Write("密码:--->" + pass + "<br/>");
        Response.Write("性别:--->" + sex + "<br/>");
        Response.Write("爱好:--->" + hobbit + "<br/>");
        Response.Write("日期:--->" + date + "<br/>");
        Response.Write("所在省份:--->" + province + "<br/>");
    }

3.执行效果