首頁 > 其他

ExtJs學習之FormPanel(一)

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

上篇中我們討論了Ext.window的簡單使用，今天我們要看看強大的FormPanel,也是繼承panel組件的使用。
首先弄清楚這個問題，建立的時候：

//查看原始碼便知，兩種方法是一樣的
Ext.form.FormPanel = Ext.FormPanel;

我們還是從最簡單的代碼執行個體開始吧：<!--html代碼-->
<body>
<div id="form1"></div>
</body>

//js代碼
var form1 = new Ext.form.FormPanel({
        width:350,
        frame:true,//圓角和淺藍色背景
        renderTo:"form1",//呈現
        title:"FormPanel",
        bodyStyle:"padding:5px 5px 0",
        items:[
           {
             fieldLabel:"UserName",//文字框標題
             xtype:"textfield",//表單文字框
             name:"user",
             id:"user",
             width:200
           },
           {
             fieldLabel:"PassWord",
             xtype:"textfield",
             name:"pass",
             id:"pass",
             width:200
           }
        ],
        buttons:[{text:"確定"},{text:"取消",handler:function(){alert("事件！");}}]
     });


都是通過items屬性參數把表單元素添加到這個表單中。
我們發現兩個文字框的類型和狂度是一樣的，我們還可以把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:[
           {
             fieldLabel:"UserName",
            //xtype:"textfield",
             name:"user",
             id:"user",
            //width:200
           },
           {
             fieldLabel:"PassWord",
            //xtype:"textfield",
             name:"pass",
             id:"pass",
             inputType:"password",
            //width:200
           }
        ],
        buttons:[{text:"確定"},{text:"取消",handler:function(){alert();}}]
     });

關於inputType,參數如下：//input的各種類型（這個大家都知道，就只列了幾個典型的）
radio
check
text(預設)
file
password等等

關於FormPanel的配置參數，請主要參考panel的參數，這裡列舉另外兩個：1.labelAlign:fieldlabel的排列位置，預設為"left"，其他兩個枚舉值是"center","right"
2.labelWidth:fieldlabel的佔位寬
3.method:"get"或"post"
4.url："提交的地址"

5.submit:提交函數 //稍後我們一起詳細分析

因為內容太多，我們先看一個例子。
1.FormPanel的fieldset應用

//把前面代碼重寫items屬性
items:[
           {
             xtype:'fieldset',
             title: '個人資訊',
             collapsible: true,
             autoHeight:true,
             width:330,
             defaults: {width: 150},
             defaultType: 'textfield',
             items :[{
                     fieldLabel: '愛好',
                     name: 'hobby',
                     value: 'www.cnblogs.com'
                 },{
                     xtype:"combo",
                     name: 'sex',
                     store:["男","女","保密"],//資料來源為一數組
                     fieldLabel:"性別",
                     emptyText:'請選擇性別.'
                 }]
             }
        ]


這裡的combox組件只是簡單的示範，具體還是要深入瞭解，我們會在以後的內容中詳細探討。
2.關於xtype的類型，在extjs的form表單（其他的請參考api）中已經定義的有：Form components
---------------------------------------
form              Ext.FormPanel
checkbox          Ext.form.Checkbox
combo             Ext.form.ComboBox
datefield         Ext.form.DateField
field             Ext.form.Field
fieldset          Ext.form.FieldSet
hidden            Ext.form.Hidden
htmleditor        Ext.form.HtmlEditor
label             Ext.form.Label
numberfield       Ext.form.NumberField
radio             Ext.form.Radio
textarea          Ext.form.TextArea
textfield         Ext.form.TextField
timefield         Ext.form.TimeField
trigger           Ext.form.TriggerField

不早了，FormPanel還有很多的東西要瞭解，但是今天不能再講了，太多了，大家都沒有興緻看下去,明天繼續。
extjs的東西很龐大，但是還沒有一個人用中文系統的分析寫文章，所以資料都很可貴，現在我想做這件事，請大家多多支援，我才有動力，
才有激情，才能寫出更好的下一片文章，讓我們期待更精彩的next吧!

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More