ExtJs2.0学习系列(4)--Ext.FormPanel之第一式

2、    frame:true,//圆角和浅蓝色背景       renderTo:"form1",//呈现       title:"FormPanel",       bodyStyle:"padding:5px 5px 0",       items:[          {            fieldLabel:"UserName",//文本框标题            xtype:"textfield",//表单文本框            name:"user",            id:"user",            width:200     

3、     },          {            fieldLabel:"PassWord",            xtype:"textfield",            name:"pass",            id:"pass",            width:200          }       ],       buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}]    });都是通过items属性参数把表单元素添加到这个表单中。我们发现两个文本框的类型和

4、狂度是一样的，我们还可以把items里面的相同项提取出来，以简化代码：//简化代码，和上面的代码效果一样var form1 = new Ext.form.FormPanel({       width:350,       frame:true,       renderTo:"form1",       title:"FormPanel",       bodyStyle:"padding:5px 5px 0",       defaults:{width:200,xtype:"textfield"},//*****简化****//       items:[      

5、    {            fieldLabel:"UserName",            //xtype:"textfield",            name:"user",            id:"user",            //width:200          },          {            fieldLabel:"PassWord",            //xtype:"textfield",            name:"pass",            id:"pass",            inp

6、utType:"password",            //width:200          }       ],       buttons:[{text:"确定"},{text:"取消",handler:function(){alert();}}]    });关于inputType,参数如下：//input的各种类型（这个大家都知道，就只列了几个典型的）radiochecktext(默认)filepassword等等关于FormPanel的配置参数，请主要参考panel的参数，这里列举另外两个：1.labelAlign:fieldlabel的排列位置，默认为"

7、left"，其他两个枚举值是"center","right"2.labelWidth:fieldlabel的占位宽3.method:"get"或"post"4.url："提交的地址"5.submit:提交函数 //稍后我们一起详细分析因为内容太多，我们先看一个例子。1.FormPanel的fieldset应用//把前面代码重写items属性items:[          {            xtype:'fieldset',            title: '个人信息',            coll