EXTJS學習系列基礎篇:第八篇(轉載)作者殷良勝,Ext元件系列之--textfield元件的基本用法

本章介紹Ext.form.TextField元件的基本用法:

<form id="form1" runat="server">

    <div>

    <div id="Bind_TextField"></div>

    <br />

    <div id="Bind_Button"></div>

    <script type="text/javascript">

    //這裡是把TextField很重要的屬性列出來　實際在應用的時候不需要将每個屬性都列出　也許隻需要一個屬性就夠了。

    function ready()

    {

        Ext.QuickTips.init();

        var textfieldName = new Ext.form.TextField

        ({

              id:"textfieldName",

              allowBlank:false,//預設是true,如果是false,就是不允許空

              //假如不為空時，定義提示資訊　預設的提示資訊是：This field is required

              //要使提示内容出現，需要添加 Ext.QuickTips.init();

              blankText:"請輸入資料",

              disabled:false,//預設是false

              emptyText:"請正确輸入資料",//預設是null

              fieldLabel:"使用者名稱",//預設是""

              height:"auto",//預設是auto

              hidden:false,//預設是false

              hideLabel:false,//預設是false

              hideMode:"offsets",//預設display,可以取值：display，offsets，visibility

              inputType:"text",//輸入類型 這個很重要，可以是radio, text, password, file 預設是text

              invalidText:"invalidText：隻能夠輸入數字",//預設是：The value in this field is invalid

              maxLength:100,//能夠輸入的内容的最大長度

              maxLengthText:"輸入内容太長了",//超出最大長度的設定資訊

              minLength:2,//能夠輸入的内容的最小長度

              maxLengthText:"輸入内容太短了",//沒有達到最小長度的設定資訊

              readOnly:false,//内容是否隻讀，預設false

              regex:/^\d$/, //正規表達式　這裡假設隻允許輸入數字　如果輸入的不是數字　就會出現下面定義的提示資訊

              regexText:"regexText：隻能夠輸入數字", //定義不符合正規表達式的提示資訊

              validateOnBlur:true,//預設是true,失去焦點時驗證

              validationDelay:300,//預設是250,驗證延遲時間,毫秒數

              validationEvent:"click", //驗證事件　預設是keyup　可以是String/Boolean

              //自定義的驗證函數　當輸入的資料不符合正規表達式的要求時，就會執行這個函數

              validator:function(){Ext.Msg.alert("提示資訊","隻能夠輸入數字");},

              value:"",//自定義的資訊　預設是：undefined             

              //x:number,y:number,在容器中的x,y坐标    

              width:"auto",//預設是auto

              renderTo:"Bind_TextField"

        });

        //TextField元件的方法和事件都比較簡單，具體請檢視Ext2.2官方文檔，如果有不明白的地方在部落格裡提問解決

        //以上就是TextField元件的常用定義。

    }

    Ext.onReady(ready);

    </script>

    </div>

    </form>

本文轉自溫景良部落格園部落格，原文連結：http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325551.html，如需轉載請自行聯系原作者