ExtJS专题-FormPanel(1)
OK，前面我们已经学过了GridPanel，TabPanel，TreePanel这三种重要的面板，今天我们再下一城，拿下FormPanel这个面板。提到表单Form,那是做WEB开发的无人不晓了。那么，在ExtJS中,对应表单Form的封装组件就是FormPanel，它的重要性就不言而喻了。为了详细说明FormPanel中的各项属性和各种字段类型，我找了一个综合点的例子，这个例子来源于网络，被人转了多次也不知道原作者是谁了，在这里我要向原作者致敬，因为这个例子写的很用心。唯一有点缺陷就是在IE6.0和FireFox2.0上测试布局效果都有点小问题，所以我这里把它改造了一下。在主流浏览器上测试通过，并且加入了大量的注释，确保大家有点ExtJS基础的能够一看就懂。注明一点就是，我使用的ExtJS版本是2.02！

       好啦。入正题。看页面效果先：



我们先来看看前台JS：

Ext.onReady(function() {
       Ext.QuickTips.init();// 浮动信息提示
       Ext.form.Field.prototype.msgTarget = 'side';// 设置控件的错误信息显示位置，主要可选的位置有：qtip,title,under,side,[elementId]
       Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地
       var simpleForm = new Ext.FormPanel({
              renderTo : document.body,
              labelAlign : 'left',
              title : '表单例子',
              buttonAlign : 'right',
              bodyStyle : 'padding:5px',
              width : 600,
              frame : true,
              labelWidth : 80,
              items : [{
                                   layout : 'column',// columnlayout
                                   border : false,// 没有边框
                                   labelSeparator : '：',// 标题的分隔符号我们用中文冒号代替英文的冒号（labelSeparator:'：'）。
                                   // coulmnLayout里的控件将定义在items里
                                   items : [{
                                                        columnWidth : .5,// 设置了该列的宽度占总宽度的50%（columnWidth:.5）
                                                        layout : 'form',// formlayout用来放置控件
                                                        border : false,// 没有边框
                                                        items : [{
                                                                             xtype : 'textfield',// 在formlayout里有一个类型为textfield'（xtype:'textfield'）的输入控件
                                                                             fieldLabel : '姓名',// 控件标题为姓名
                                                                             name : 'name',// 输入框（input）的name属性设置“name”
                                                                             anchor : '90%'// 输入框的长度为列宽减去标题的宽度后的90%（anchor:'90%'），余下的10%的是给显示错误信息图标用的。
                                                                      }]
                                                 }, {
                                                        columnWidth : .25,// 在加入性别的radio控件时就要注意了，这里需要加入两个radio，第一radio是有标题的，第二是没有的，而且两个radio加起来的宽度应该正好是余下的列宽（50%）
                                                        layout : 'form',
                                                        border : false,
                                                        items : [{
                                                                             style : 'margin-top:5px',// 设置一个css属性，顶部的外补丁为5px（style:'margin-top:5px'），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。
                                                                             xtype : 'radio',// Formlayout里加入了一个类型为radio的控件
                                                                             fieldLabel : '性别',// 控件的标题是性别
                                                                             boxLabel : '男',// 控件的选择显示文本是男
                                                                             name : 'sex',// input的name属性值是sex
                                                                             checked : true,// 该控件默认是已选的
                                                                             inputValue : '男',// 控件的值（value）是男
                                                                             anchor : '95%'// input的宽度是95%
                                                                      }]
                                                 }, {