ExtJS常用表单操作

来源：互联网发布：日本搞笑电影知乎编辑：程序博客网时间：2024/04/29 22:25

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.执行效果