首頁 > 開發者 > JavaScript

EXTJs 表單控制項

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

<1>TextField 文本輸入控制項


[javascript]
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>Ext Buttons</title> 
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/> 
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="../../ext-all.js"></script> 
    <script type="text/javascript" src="../examples.js"></script> 
    <script type="text/javascript"> 
        Ext.onReady(function(){ 
            //Ext.form.TextField  
            var textField = new Ext.form.TextField( 
                { 
                    fieldLabel:'使用者名稱', 
                    allowBlank:false,//不允許為空白  
                    emptyText:'請填寫使用者名稱',//輸入為空白時提示的預設資訊  
                    maxLength:10,//限制輸入的資料在5-10之間  
                    minLength:5, 
                } 
            ); 
            //Ext.form.FormPanel  
            var form = new Ext.form.FormPanel( 
                { 
                    title:'表單控制項', 
                    frame:true, 
                    items:[textField], 
                    renderTo:'form' 
                } 
            ); 
        } 
    ); 
    </script> 
</head> 
<body> 
    <div id = "form" style = "width:700px;"> 
    </div> 
    <br> 
</body> 
</html> 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ext Buttons</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="../examples.js"></script>
 <script type="text/javascript">
  Ext.onReady(function(){
   //Ext.form.TextField
   var textField = new Ext.form.TextField(
    {
     fieldLabel:'使用者名稱',
     allowBlank:false,//不允許為空白
     emptyText:'請填寫使用者名稱',//輸入為空白時提示的預設資訊
     maxLength:10,//限制輸入的資料在5-10之間
     minLength:5,
    }
   );
   //Ext.form.FormPanel
   var form = new Ext.form.FormPanel(
    {
     title:'表單控制項',
     frame:true,
     items:[textField],
     renderTo:'form'
    }
   );
  }
 );
 </script>
</head>
<body>
 <div id = "form" style = "width:700px;">
 </div>
 <br>
</body>
</html>

 


<2>TextArea多行文本輸入控制項


[javascript]
/Ext.form.TextArea  
            var textArea = new Ext.form.TextArea( 
                { 
                    width:200,//寬度  
                    grow:true,//當值為 true 時表示欄位可以根據內容自動調整  
                    preventScrollbars:true,//防止出現捲軸，如果超出會自動隱藏  
                    fieldLabel:'自我介紹', 
                    allowBlank:false,//不允許為空白  
                    emptyText:'空',//輸入為空白時提示的預設資訊  
                    maxLength:100,//限制輸入的資料在10-100之間  
                    minLength:10, 
                } 
            ); 
            //Ext.form.FormPanel  
            var form = new Ext.form.FormPanel( 
                { 
                    title:'表單控制項', 
                    frame:true, 
                    items:[textArea], 
                    renderTo:'form' 
                } 
            ); 

//Ext.form.TextArea
   var textArea = new Ext.form.TextArea(
    {
     width:200,//寬度
     grow:true,//當值為 true 時表示欄位可以根據內容自動調整
     preventScrollbars:true,//防止出現捲軸，如果超出會自動隱藏
     fieldLabel:'自我介紹',
     allowBlank:false,//不允許為空白
     emptyText:'空',//輸入為空白時提示的預設資訊
     maxLength:100,//限制輸入的資料在10-100之間
     minLength:10,
    }
   );
   //Ext.form.FormPanel
   var form = new Ext.form.FormPanel(
    {
     title:'表單控制項',
     frame:true,
     items:[textArea],
     renderTo:'form'
    }
   );

 

當grow:false   preventScrollbars:false時如果內容超出顯示範圍會出現捲軸

 


<3>DateField日期輸入控制項


[javascript]
//Ext.form.DateField  
            var dateField = new Ext.form.DateField( 
                { 
                    fieldLabel:'生日', 
                    emptyText:'請選擇',//輸入為空白時提示的預設資訊  
                    format:'Y-m-d',//用以覆蓋本地化的預設日期格式化字串  
                    disableDays:[0,6]//一個以字串形式表示的禁用的日期數組  
                } 
            ); 
            //Ext.form.FormPanel  
            var form = new Ext.form.FormPanel( 
                { 
                    title:'表單控制項', 
                    frame:true, 
                    items:[dateField], 
                    renderTo:'form' 
                } 
            ); 

//Ext.form.DateField
   var dateField = new Ext.form.DateField(
    {
     fieldLabel:'生日',
     emptyText:'請選擇',//輸入為空白時提示的預設資訊
     format:'Y-m-d',//用以覆蓋本地化的預設日期格式化字串
     disableDays:[0,6]//一個以字串形式表示的禁用的日期數組
    }
   );
   //Ext.form.FormPanel
   var form = new Ext.form.FormPanel(
    {
     title:'表單控制項',
     frame:true,
     items:[dateField],
     renderTo:'form'
    }
   );

 

<4>TimeField時間輸入控制項


[javascript]
//Ext.form.TimeField  
            var timeField = new Ext.form.TimeField( 
                { 
                    fieldLabel:'時間', 
                    emptyText:'請選擇',//輸入為空白時提示的預設資訊  
                    minValue:'10:30 AM',//起始時間  
                    maxValue:'14:00 PM',//結束時間  
                    increment:30//時間間隔為30分鐘  
                } 
            ); 
            //Ext.form.FormPanel  
            var form = new Ext.form.FormPanel( 
                { 
                    title:'表單控制項', 
                    frame:true, 
                    items:[timeField], 
                    renderTo:'form' 
                } 
            ); 

//Ext.form.TimeField
   var timeField = new Ext.form.TimeField(
    {
     fieldLabel:'時間',
     emptyText:'請選擇',//輸入為空白時提示的預設資訊
     minValue:'10:30 AM',//起始時間
     maxValue:'14:00 PM',//結束時間
     increment:30//時間間隔為30分鐘
    }
   );
   //Ext.form.FormPanel
   var form = new Ext.form.FormPanel(
    {
     title:'表單控制項',
     frame:true,
     items:[timeField],
     renderTo:'form'
    }
   );

 

<5>HtmlEditor線上編輯器


[javascript]
//Ext.form.HtmlEditor  
            var htmlEditor = new Ext.form.HtmlEditor( 
                { 
                    fieldLabel:'留言', 
                    enableAlignments:true,//允許居左、置中、居右按鈕(預設為 true)。  
                    enableColors:true,//允許前景/醒目提示按鈕  
                    enableFontSize:true,//允許增大/縮小字型大小按鈕(預設為 true)。  
                    enableFont:true,//允許字型選項。  
                    enableFormat:true,//允許粗體、斜體和底線按鈕(預設為 true)。  
                    enableLinks:true,//允許建立連結按鈕。  
                    enableLists:true,//允許項目和列表符號按鈕。  
                    enableSourceEdit:true,//允許切換到源碼編輯按鈕。  
                } 
            ); 
            //Ext.form.FormPanel  
            var form = new Ext.form.FormPanel( 
                { 
                    title:'表單控制項', 
                    frame:true, 
                    items:[htmlEditor], 
                    renderTo:'form' 
                } 
            ); 



本文章原先以中文撰寫並發佈於 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