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

在上篇和前面的介绍中，我们基本上对form表单中常见组件有了简单的认识，今天我们做个综合点的例子，向服务器提交下！

其实这篇文章很简单，没有什么发光点，暂放首页半天,忘各位理解！

先来个简单的例子，以说明formpanel如何把数据传给其他页面。

效果图：

",

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，希望各位支持，拍砖，给我动力！

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