`
xiangxingchina
  • 浏览: 507380 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext.FormPanel之第五式(综合篇)

    博客分类：
  • ext
 
阅读更多

在上篇 和前面的介绍中，我们基本上对form表单中常见组件有了简单的认识，今天我们做个综合点的例子，向服务器提交下！
其实这篇文章很简单，没有什么发光点，暂放首页半天,忘各位理解！
先来个简单的例子，以说明formpanel如何把数据传给其他页面。
效果图：

现在我们要实现的效果是：点击确定，把值传到另一页面！，如下：

 原页面js代码为：

Ext.onReady( function (){
  Ext.QuickTips.init();
   var  form = new  Ext.FormPanel({
     frame: true ,
     width: 300 ,
      // monitorValid:true,//绑定验证
     layout: " form " ,
     labelWidth: 70 ,
     title: " 添加个人信息 " ,
     labelAlign: " left " ,
     renderTo:Ext.getBody(),
     submit:  function (){
                     this .getEl().dom.action  =   ' GetForm.aspx ' ,
                     this .getEl().dom.method = ' POST ' ,
                     this .getEl().dom.submit();
              },
     items:[{
               xtype: " textfield " ,
               fieldLabel: " 用户名 " ,
                // id:"UserName",
               allowBlank: false ,
               blankText: " 不能为空，请正确填写 " ,
               name: " UserName " ,
               anchor: " 90% "
           },{
               xtype: " textfield " ,
               fieldLabel: " 昵称 " ,
                // id:"SmallName",
               name: " SmallName " ,
               anchor: " 90% "
           },{
               xtype: " datefield " ,
               fieldLabel: " 注册日期 " ,
                // id:"RegDate",
               name: " RegDate " ,
               anchor: " 90% "
           }],
       });

接受页面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);
    }

因为很简单，我做个简要说明：

// 几点说明
1 .首先定义submit参数的执行函数，即：
   submit:  function (){
                     this .getEl().dom.action  =   ' GetForm.aspx ' , // 转向页面地址
                     this .getEl().dom.method = ' POST ' , // 方式
                     this .getEl().dom.submit(); // 提交！
              },
 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}]
则只有所有的填写字段都满足条件时， " 确定 " 方可提交！如下图，



好了，一个简单的formpanel的提交的原理弄清楚啦！
有关form提交数据的方法有多种，大家可以参考http://www.17ext.com/showtopic-55.aspx （三种ext提交数据的方式），

以后有机会我们再讨论！
下面我们来做个复杂点（只是样子）的form，示例一下（还是上面的原理）！
效果图：

传到GetForm.aspx页面后显示：
不过在传过来的页面要记得ValidateRequest="false"，安全编码我就暂且不讨论了！
js代码：

Ext.onReady( function (){
  Ext.QuickTips.init();
   var  form = new  Ext.FormPanel({
     frame: true ,
     width: 500 ,
     monitorValid: true , // 把有formBind:true的按钮和验证绑定
     layout: " form " ,
     labelWidth: 55 ,
     title: " 添加个人信息 " ,
     labelAlign: " right " ,
     renderTo:Ext.getBody(),
     submit:  function (){
                     this .getEl().dom.action  =   ' GetForm.aspx ' ,
                     this .getEl().dom.method = ' POST ' ,
                     this .getEl().dom.submit();
              },
     items:[{
               xtype: " panel " ,
               layout: " column " ,
               fieldLabel: " 用户名 " ,
               isFormField: true ,
               items:[{
                         columnWidth:. 5 ,
                         xtype: " textfield " ,
                         allowBlank: false ,
                         blankText: " 不能为空，请填写 " ,
                         name: " UserName " ,
                         anchor: " 90% "
               },{
                         columnWidth:. 20 ,
                         layout: " form " ,
                         labelWidth: 40 ,
                         labelAlign: " right " ,
                         items:[{
                                   xtype: " radio " ,
                                   fieldLabel: " 性别 " ,
                                   boxLabel: " 男 " ,
                                   name: " Sex " ,
                                   checked: true ,
                                   inputValue: " man " , // 这里如果用value，值是on，所以用inputValue（出现这种情况的是radio,checkbox）
                                   anchor: " 95% "
                         }]
               },{
                         columnWidth:. 30 ,
                         layout: " form " ,
                         labelWidth: 1 , // 让标签宽度为很小的值（奇怪的是为0时反而不行）
                         items:[{
                                   xtype: " radio " ,
                                   boxLabel: " 女 " ,
                                   labelSeparator: "" , // 去除分隔符“：”
                                   name: " Sex " ,
                                   inputValue: " woman " ,
                                   anchor: " 95% "
                         }]
               }]
     },{ // 上面是第一行
               xtype: " panel " ,
               layout: " column " ,
               fieldLabel: " 出生日期 " ,
               isFormField: true ,
               items:[{
                         columnWidth:. 5 ,
                         xtype: " datefield " ,
                         name: " BirthDate " ,
                         anchor: " 90% "
               },{
                         columnWidth:. 5 ,
                         layout: " form " ,
                         labelWidth: 40 , // 注意，这个参数在这里可以调整简单fieldLabel的布局位置
                         items:[{
                                   xtype: " combo " ,
                                   name: " Degree " ,
                                   fieldLabel: " 学位 " ,
                                   store:[ " 小学 " , " 初中 " , " 高中 " , " 专科 " , " 本科 " , " 硕士 " , " 博士 " ],
                                   emptyText: " 请选择适合你的学历 " ,
                                   anchor: " 90% "
                         }]
               }]
     },{ // 上面是第二行
               xtype: " panel " ,
               layout: " column " ,
               isFormField: true ,
               fieldLabel: " 使用框架 " ,
               items:[{
                         columnWidth:. 2 ,
                         xtype: " checkbox " ,
                         boxLabel: " Spring.net " ,
                         name: " SpringNet " ,
                         inputValue: " spring " // 这里如果用value，值是on，所以用inputValue
               },{
                         columnWidth:. 2 ,
                         layout: " form " ,
                         labelWidth: 1 ,
                         items:[{
                                   xtype: " checkbox " ,
                                   boxLabel: " Nhibernate " ,
                                   labelSeparator: "" ,
                                   name: " NHibernate " ,
                                   inputValue: " nhibernate " ,
                                   anchor: " 95% "
                         }]
               },{
                         columnWidth:. 6 ,
                         layout: " form " ,
                         labelWidth: 1 ,
                         items:[{
                                   xtype: " checkbox " ,
                                   boxLabel: " Linq " ,
                                   labelSeparator: "" ,
                                   name: " Linq " ,
                                   inputValue: " linq " ,
                                   anchor: " 95% "
                         }]
               }]
               
     },{ // 上面是第三行
               xtype: " textfield " ,
               fieldLabel: " Email " ,
               name: " Email " ,
               vtype: " email " , // email验证,如果想自定义验证的话，请参见前面的文章
               vtypeText: " email格式错误！ " ,
               anchor: " 56% " // 控制文本框的长度
               
     },{ // 上面是第四行
               xtype: " textarea " ,
               fieldLabel: " 个性签名 " ,
               name: " OneWord " ,
               height: 50 ,
               anchor: " 95% "
     },{ // 上面是第五行
               xtype: " htmleditor " ,
               fieldLabel: " 想说的话 " ,
               name: " WantToSay " ,
               anchor: " 95% " ,
               enableAlignments: false , // 去除左右对齐工具栏
               enableLists: false // 去除列表工具栏
     }],
      buttons:[{text: " 确定 " ,handler:login,formBind: true },{text: " 取消 " ,handler:reset}]
  });
   function  login(){
         form.form.submit();
   }
    function  reset(){
         form.form.reset();
   }
});

接受cs页面的代码：

protected   void  Page_Load( object  sender, EventArgs e)
    {
         string  UserName  =  Request.Form[ " UserName " ];
         string  Sex  =  Request.Form[ " Sex " ];
         string  BirthDate  =  Request.Form[ " BirthDate " ];
         string  Degree  =  Request.Form[ " Degree " ];
         string  SpringNet  =  Request.Form[ " SpringNet " ];
         string  NHibernate  =  Request.Form[ " NHibernate " ];
         string  Linq  =  Request.Form[ " Linq " ];
         string  Email = Request.Form[ " Email " ];
         string  OneWord  =  Request.Form[ " OneWord " ];
         string  WantToSay  =  Request.Form[ " WantToSay " ];

        Response.Write( " 用户名： "   +  UserName  +   " <br/> " );
        Response.Write( " 性别是： "   +  Sex  +   " <br/> " );
        Response.Write( " 出生日期: "   +  BirthDate  +   " <br/> " );
        Response.Write( " 学位： "   +  Degree  +   " <br/> " );
        Response.Write( " 使用框架有： " );
         if  (SpringNet  !=   null )
        {
            Response.Write(SpringNet  +   " , " );
        }
         if  (NHibernate  !=   null )
        {
            Response.Write(NHibernate  +   " , " );
        }
         if  (Linq  !=   null )
        {
            Response.Write(Linq  +   " , " );
        }
        Response.Write( " <br/> " );
        Response.Write( " 邮件地址： "   +  Email);
        Response.Write( " 个性签名： "   +  OneWord  +   " <br/> " );
        Response.Write( " 想说的话： "   +  WantToSay);
    }

经过一个简单的传值原理传值后，一个表单就可以把数据存储到数据库中去了！

// 注意几点
1 .绑定验证的两个参数 monitorValid: true ,formBind: true
2 .精确布局要注意的参数为和width有关的：width: 500 ,labelWidth: 55 ,columnWidth:. 5 ,anchor: " 90% " ,isFormField:true等
 3 .radio和checkbox通过inputValue获取值，页面传值
4.多列多组件布局为form和column和form布局组合使用，请参考源码分析！

至此，formpanel的简单使用就告一段落，但是formpanel的应用还远远没有讲到，有机会我们再在高级篇里讨论！
谢谢各位朋友的支持！
在下篇中我们接着诉说另外一个组件tabpanel，希望各位支持，拍砖，给我动力！

最后，推荐一个网站：浪曦视频网

js文件下载:关键js代码下载

分享到：
| Spring + iBatis 的多库横向切分简易解决思 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    ExtJs入门实例

    8. ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇) 9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 10. ExtJs2.0学习系列(10)--Ext.TabPanel之第二式 11. ExtJs2.0学习系列(11)--Ext.XTemplate 12. ExtJs2.0...

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    (1)Ext.FormPanel f.getForm().submit({ url:”……”, params:{ XX:xx …..} success: function (c,v,e) { //e: 触发事件 var json=Ext.decode(v.response.responseText); }, failure:function(c,v,e){} }) (2)Ext....

    Ext的FormPanel组件

    Ext的FormPanel组件说明formPanel的详细使用说明

    ext几个实例

    本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.

    ExtAspNet_v2.3.2_dll

    -Grid中TemplateField生成到页面中控件具有唯一ID，例如Grid1_ct5_Label2,Grid1_ct6_Label2(feedback:geruger)。 +2009-09-27 v2.1.2 -为Tree控件增加GetExpandAllNodesReference和...

    Ext+JS高级程序设计.rar

    第5章 在.NET中使用Ext.Direct 142 5.1 路由器包的内容 142 5.2 DIY一个Ext.Direct实例 152 5.3 NewtonSoft.JSON 155 5.3.1 JSON的序列化和反序列化 155 5.3.2 LINQ to JSON 158 5.3.3 JSON文本的输出 162 5.4 本章...

    extjs form textfield的隐藏方法

    this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...

    Ext table布局实例 formpanel的table布局

    Ext的formpanel table布局实例，有效解决了页面resize时列宽不跟随改变的问题，即列宽的自适应宽度

    Extjs中DisplayField的日期或者数字格式化扩展

    使用 Ext.form.FormPanel 来处理数据时候，某些字段是需要只读的。当然我们可以使用 Ext.form.TextField，然后设置成 ReadOnly，不过这样子的显示效果不是很好，因为始终会有个输入框。所以我们必须使用 Ext.form....

    Extjs优化(二)Form表单提交通用实现

    a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, params: a.params, waitMsg: “正在提交数据…”, success: function(c, d) { Ext.ux.Toast.msg(“操作信息”, “成功信息保存！...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    var tab2 = new Ext.FormPanel({ labelAlign: 'top', title: 'Inner Tabs', bodyStyle:'padding:5px', width: 1000, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form'...

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1　下载EXT发布包 1 1.2　如何查看EXT自带的API和示例 1 1.3　为什么有些示例必须放在服务器上 才能看到效果 2 1.4　Hello World 2 1.4.1　直接使用下载的发布包 2 1.4.2　在项目中使用EXT...

    ExtJs实现数据加载和提交经典代码

    在使用使用FormPanel时我们通常需要使用它的form对象来加载数据或提交数据。...doAction方法带有两个参数，其中第二个参数为从load或submit 方法传递过来的Ext.form.Action对象的配置数据（Config Options）

    ext实现完整的登录代码

    //定义表单 var simple = new Ext.FormPanel({ labelWidth: 75, baseCls: ‘x-plain’, width: 150, defaultType: ‘textfield’,//默认字段类型 //定义表单元素 items: [{ fieldLabel: ‘帐户’, name:...

    轻松搞定Extjs_原创

    第五章：页面与脚本完全分离 28 一、Extjs是脚本的世界 28 二、Ext.onReady事件 28 三、来自Extjs的问候 29 四、让界面动起来 29 五、Ext.Fx类 30 六、Ext.Element类中的动画函数 34 七、小结 35 第六章：元素操作与...

    ExtJs中处理后台传过来的date对象显示到页面上

    在使用ExtJs开发时会遇到这样的问题，后台传来一个java对象，里面有一个date类型的数据，现在要显示到页面上，我们该如何写才能不用将date转换成string的直接在页面上显示。下面解决办法：例如：在员工查询页面上，...

    extjs中验证实例

    var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:...

Magicbox
Global site tag (gtag.js) - Google Analytics