码迷，mamicode.com
首页 > Web开发 > 详细

Ext.js入门：常用组件与综合案例（七）

时间：2016-09-05 00:00:33      阅读：437      评论：0      收藏：0      [点我收藏+]

标签：

一：datefield简单示例
二：timefield简单示例
三：numberfield简单示例
四：FormPanel提交
 
datefield简单示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function() {
            var myform = new Ext.FormPanel({
                frame: true,
                width: 200,
                layout: "form",
                title: "请选择出生日期",
                labelWidth: 60,
                labelAlgin: "right",
                renderTo: Ext.getBody(),
                items: [
                 {
                     xtype: "datefield",
                     fieldLabel: "出生日期",
                     anchor: "95%"
                 },
                 {
                     xtype:"timefield",
                     fieldLabel:"出生时间",
                     anchor:"95%"
                 },
                 {
                     xtype: "numberfield",
                     fieldLabel: "输入数字",
                     anchor: "95%"
                 }
               ]

            });
        });
    </script>
</head>
<body>

</body>
</html>
timefield简单示例
把上面的例子中datefield改为timefield,效果图：
技术分享
numberfield简单示例：
把上面的datefield改为numberfield，就只能输入数字了
 
四：FormPanel提交
示例formpanel如何把数据传给其他页面：
技术分享 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = "side";

            var mysubmit = function() {
                myform.form.submit();

            };
            var myreset = function() {
                myform.form.reset();
            };
            var myform = new Ext.form.FormPanel({
                title: "添加用户",
                width: 300,
                frame: true,
                layout: "form",
                labelAlign: "right",
                labelWidth: 70,
                renderTo: Ext.getBody(),
                monitorValid:true,
                submit: function() {
                    this.getEl().dom.action = "GetForm.aspx";
                    this.getEl().dom.method = "POST",
                    this.getEl().dom.submit();
                },


                items: [
               {
                   xtype: "textfield",
                   fieldLabel: "用户名",
                   id: "username",
                   name: "username",
                   allowBlank: false,
                   blankText: "用户名不允许为空!",
                   anchor: "90%"
               }, //first
               {
               xtype: "textfield",
               fieldLabel: "昵称",
               id: "smallname",
               name: "smallname",
               anchor: "90%"
           }, //second
               {
               xtype: "datefield",
               fieldLabel: "注册日期",
               id: "regdate",
               name: "regdate",
               anchor: "90%"

} //third
               ],
                buttonAlign: "center",
                buttons: [{ text: "确定",formBind:true, handler: mysubmit }, { text: "重置", handler: myreset}]
            });

        });
    </script>
</head>
<body>

</body>
</html>

后台代码：

        Response.Write(Request["username"].ToString());
        Response.Write("<br/>");
        Response.Write(Request["smallname"].ToString());
        Response.Write("<br/>");
        Response.Write(Request["regdate"].ToString());

 

2.为按钮添加触发相应的提交（取消）事件（这样就不是默认的ajax提交）：
 

 buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
  });
  function login(){
         form.form.submit();//提交
   }
   function reset(){
         form.form.reset();//取消
   }

 3.如果你想绑定验证，在form表单添加参数

 

 monitorValid:true,然后在按钮配置参数中添加formBind：true，如
  buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]

 则只有所有的填写字段都满足条件时，"确定"方可提交！

接受页面GetForm.aspx的cs代码为：
protected void Page_Load(object sender, EventArgs e)
    {
        string UserName = Request.Form["UserName"];
        string SmallName = Request.Form["SmallName"];
        string RegDate = Request.Form["RegDate"];

        Response.Write(UserName + "<br/>" + SmallName + "<br/>" + RegDate);
    }

四：综合案例：

技术分享

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="Ext/ext-all.js" type="text/javascript"></script>
    <script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">

        Ext.onReady(function() {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = "side";

            var submitform = function() {
                myform.form.submit();
            };
            var resetform = function() {
                myform.form.reset();
            }
            var myform = new Ext.form.FormPanel({
                title: "添加个人信息",
                frame: true,
                width: 450,
                layout: "form",
                labelWidth: 55,
                labelAlign: "right",
                renderTo: Ext.getBody(),
                monitorValid: true,
                submit: function() {
                    this.getEl().dom.action = "handlerInfo.aspx";
                    this.getEl().dom.method = "POST";
                    this.getEl().dom.submit();


                },
                items:
                [   //items start
                  {
                  xtype: "panel",
                  layout: "column",
                  fieldLabel: "用户名",
                  items:
                     [
                        {
                            columnWidth: .5,
                            xtype: "textfield",
                            allowBlank: false,
                            blankText: "用户名不允许为空!",
                            name: "UserName",
                            anchor: "90%"
                        },
                        {
                            columnWidth: .25,
                            layout: "form",
                            lableWidth: 30,
                            labelAlign: "right",
                            items: [
                               { xtype: "radio",
                                   fieldLabel: "性别",
                                   boxLabel: "男",
                                   name: "Sex",
                                   checked: true,
                                   inputValue: "boy",
                                   anchor: "99%"
                               }
                            ]

                        },
                        {
                            columnWidth: .25,
                            layout: "form",
                            labelWidth: 1,
                            items: [{
                                xtype: "radio",
                                boxLabel: "女",
                                name: "Sex",
                                inputValue: "girl",
                                anchor: "95%"
}]

                            }
                     ]

              },
              {
                  xtype: "panel",
                  layout: "column",
                  fieldLabel: "出生日期",
                  items: [
                            {
                                columnWidth: .5,
                                xtype: "datefield",
                                name: "BirthDate",
                                anchor: "90%"
                            },
                            {
                                columnWidth: .5,
                                layout: "form",
                                labelWidth: 40,
                                items: [
                                 { xtype: "combo",
                                     name: "Degree",
                                     fieldLabel: "学位",
                                     store: ["小学", "初中", "高中", "大学"],
                                     emptyText: "请选择您的学历...",
                                     anchor: "90%"
                                 }
                              ]
                            }
                ]
              },
              {
                  xtype: "panel",
                  layout: "column",
                  fieldLabel: "使用框架",
                  items: [
                     {
                         columnWidth: .2,
                         xtype: "checkbox",
                         boxLabel: "Spring.net",
                         name: "SpringNet",
                         inputValue: "spring"
                     },
                     {
                         columnWidth: .25,
                         layout: "form",
                         labelWidth: 1,
                         items: [
                           {
                               xtype: "checkbox",
                               boxLabel: "Nhibernate",
                               name: "NHibernate",
                               inputValue: "nhibernate",
                               anchor: "95%"
                           }
                        ]
                     },
                     {
                         columnWidth: .55,
                         layout: "form",
                         labelWidth: 1,
                         items: [
                           {
                               xtype: "checkbox",
                               boxLabel: "Linq",
                               name: "Linq",
                               inputValue: "linq",
                               anchor: "95%"
                           }
                        ]
                     }
                ]

              },
              {
                  xtype: "textfield",
                  fieldLabel: "Email",
                  name: "Email",
                  vtype: "email",
                  vtypeText: "请输入合法的Email",
                  anchor: "60%"
              },
              {
                  xtype: "textarea",
                  fieldLabel: "个性签名",
                  name: "OneWord",
                  height: 60,
                  anchor: "95%"

              },
              {
                  xtype: "htmleditor",
                  fieldLabel: "想说的话",
                  name: "WantToSay",
                  anchor: "95%",
                  enableAlignments: false,
                  enableLists: false,
                  height: 200
              }
                ], //items end
                buttons: [{ text: "确定", handler: submitform, formBind: true }, { text: "取消", handler: resetform}]

            });


        });
    </script>
</head>
<body>

</body>
</html>

后端代码：

        string UserName = Request.Form["UserName"];
        Response.Write("UserName:"+UserName+"<br/>");
        string Sex = Request.Form["Sex"];
        Response.Write("Sex:" + Sex + "<br/>");
        string BirthDate = Request.Form["BirthDate"];
        Response.Write("BirthDate:" + BirthDate + "<br/>");
        string Degree = Request.Form["Degree"];
        Response.Write("Degree:" + Degree + "<br/>");
        string SpringNet = Request.Form["SpringNet"];
        Response.Write("SpringNet:" + SpringNet + "<br/>");
        string NHibernate = Request.Form["NHibernate"];
        Response.Write("NHibernate:" + NHibernate + "<br/>");
        string Linq = Request.Form["Linq"];
        Response.Write("Linq:" + Linq + "<br/>");
        string Email = Request.Form["Email"];
        Response.Write("Email:" + Email + "<br/>");
        string OneWord = Request.Form["OneWord"];
        Response.Write("OneWord:" + OneWord + "<br/>");
        string WantToSay = Request.Form["WantToSay"];
        Response.Write("WantToSay:" + WantToSay + "<br/>");

 

附一张错误的解决方案：

技术分享

配置中加上这句话：

技术分享

Ext.js入门：常用组件与综合案例（七）

标签：

原文地址：http://www.cnblogs.com/sunliyuan/p/5840585.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！