ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)

ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)

在 上篇和前面的介绍中，我们基本上对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代码下载

 

Tag标签: ExtJs2.0

posted @ 2008-08-07 00:19 谦虚的天下 阅读(2274) 评论(28)   编辑 收藏 所属分类: ExtJs学习系列

发表评论

   回复   引用   查看     

#1楼  2008-08-07 07:55 | 鹏       

学习!

   回复   引用   查看     

#2楼  2008-08-07 08:02 | 杨义金       

思路很清晰，是我看到到得最简明易懂的教程了！

   回复   引用   查看     

#3楼  [ 楼主]2008-08-07 08:03 | 谦虚的天下       

@鹏
@杨义金
谢谢支持！

   回复   引用   查看     

#4楼  2008-08-07 08:56 | 细粒细       

博主的东西不错。看了您的教程后，我觉得该学习EXT一下了。

   回复   引用   查看     

#5楼  2008-08-07 09:54 | 爱上北溟鸟       

感谢博主无私共享
正不知道ext该如何学起呢
谢谢了 o(∩_∩)o...

   回复   引用     

#6楼  2008-08-07 12:30 | GYB [未注册用户]

写的很好，基本上都能看懂
我想做个注册，用这种提交方式怎么接收服务器返回的结果true/false

   回复   引用   查看     

#7楼  2008-08-07 13:02 | yangjun       

楼主,有空时能不能做个教程,把EXTJS 和ASP.NET 结合起来使用。使用SQL SERVER作为数据源，相信很多人都想看这样的教程，造福一下大家吧。谢谢。

   回复   引用   查看     

#8楼  [ 楼主]2008-08-07 13:03 | 谦虚的天下       

@GYB
你可以用success的回调涵数,或者直接用.net的页面处理

   回复   引用   查看     

#9楼  [ 楼主]2008-08-07 13:04 | 谦虚的天下       

@yangjun
文章主要讲基础,做参考用更好...

   回复   引用     

#10楼  2008-08-07 14:38 | abcd [未注册用户]

好文章,思路清晰.

   回复   引用     

#11楼  2008-08-07 15:39 | GYB [未注册用户]

success在哪里定义的？
我现在用ajax方式提交有success的回调函数
但在服务器那边用 request.getParameter("sex")得到的都是第一个radio的值
inputValue:1 这个没写错把

   回复   引用   查看     

#12楼  2008-08-07 15:48 | 岁寒づ古枫       

楼主的文章真的越来越好了！
努力，顶

   回复   引用   查看     

#13楼  2008-08-07 15:49 | 岁寒づ古枫       

--引用--------------------------------------------------
yangjun: 楼主,有空时能不能做个教程,把EXTJS 和ASP.NET 结合起来使用。使用SQL SERVER作为数据源，相信很多人都想看这样的教程，造福一下大家吧。谢谢。
--------------------------------------------------------
再顶一下，支持7楼的！

   回复   引用     

#14楼  2008-08-07 17:11 | iomo [未注册用户]

o(∩_∩)o... 和服务器进行交互了，支持。
老大，你那里有写课程的目录吗？

   回复   引用   查看     

#15楼  [ 楼主]2008-08-07 21:12 | 谦虚的天下       

@iomo
没有

   回复   引用     

#16楼  2008-08-08 13:27 | zzzz [未注册用户]

坦白说，formpanel让我最深刻的是对服务器传过来的json格式数据自动绑定，参照它做了一个在不依赖于任何框架的情况下自动绑定(根据自定义属性或者id，name，额外的定义这些）。

个人还是不太喜欢这东西，太麻烦了。。。

   回复   引用   查看     

#17楼  2008-08-08 14:16 | 岁寒づ古枫       

能做一个类似这个贴子理的例子吗！
http://www.cnblogs.com/meetrice/archive/2008/05/28/1209314.html
ajax 取数据 C#.net后台的 sql2000数据库的！

   回复   引用     

#18楼  2008-08-26 10:57 | bobby_200x [未注册用户]

那个复杂点的formpanel的代码貌似有问题，我这里测试报错，行：137 对象不支持此属性和方法，页面能显示，但排列的有问题，有些表单项目出不来，是怎么回事呢？我是初学者，还希望博主和各位强人们给点指教～

   回复   引用   查看     

#19楼  [ 楼主]2008-08-26 12:16 | 谦虚的天下       

@bobby_200x
请针对代码用firebug或vs2008等调试错误,把出错的地方再对照文章中的代码,看哪里不一样,还没有解决的话,把代码也贴出来看看

   回复   引用     

#20楼  2008-08-26 15:51 | bobby_200x [未注册用户]

我把代码放到vs里调试，报的错也差不多，“jscript运行时错误，对象不支持此属性或方法”，报的是ext-all.js文件里的137行中的“if(!E.isValid(true))”这一句（高亮显示），代码就是上面那个最长的代码，我一点都没有改。

   回复   引用     

#21楼  2008-08-26 16:04 | bobby_200x [未注册用户]

显示的不正常，且htmleditor不能用，我截了个图，可以看看
http://www.959studio.cn/temp/extForm.jpg

   回复   引用   查看     

#22楼  [ 楼主]2008-08-26 18:56 | 谦虚的天下       

@bobby_200
我把我的js文件上传在文章后面

   回复   引用   查看     

#23楼  [ 楼主]2008-08-26 23:02 | 谦虚的天下       

@bobby_200x
不好意思,网速太慢,现在才上传上去!

   回复   引用     

#24楼  2008-08-27 21:17 | bobby_200x [未注册用户]

var cookiesArr=document.cookie.split(";");
var css;
for(var i=0;i<cookiesArr.length;i++)
{
var arr=cookiesArr[i].split("=");
if(arr[0]=="css")
{
css=arr[1];
break;
}
}
document.getElementsByTagName("link")[1].href="ExtJs/resources/css/"+css;
alert(css);


你在js里加了这一段我不明白是什么意思，注释掉了以后还是和以前一样的情况，我郁闷了~~我把js加到html页面里了，然后传了个地址，望博主大人再帮我看看，感谢！感谢！

   回复   引用     

#25楼  2008-08-27 21:18 | bobby_200x [未注册用户]

晕，地址忘发了
http://www.959studio.cn/temp/test1.rar

   回复   引用   查看     

#26楼  [ 楼主]2008-08-27 21:29 | 谦虚的天下       

@bobby_200x
不好意思,那段代码是另外一个换肤例子的代码,在本例子中,可以删去,误导你了,sorry!

   回复   引用     

#27楼  2008-08-28 09:14 | bobby_200x [未注册用户]

问题还是没有解决啊，难道是我的IE7的问题？我已经把你那段换肤的注释掉了再执行，还是老样子，OMG～～

   回复   引用   查看     

#28楼  2008-08-29 09:36 | 麒麟       

good