Ext Form佈局

Ext Form佈局

現在我們要實現的效果是：點擊確定，把值傳到另一頁面！，如下：

原頁面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();
  }
});