1. 程式人生 > >註冊Number,單選,複選

註冊Number,單選,複選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用者登入介面</title>
    <script typt="text/javascript" src="../ext/ext-all.js"></script>
    <link rel="stylesheet" href="../ext/resources/css/ext-all.css"/>
</head>
<body>
<div id="register"></div>
<script typt="text/jjavascript">
    Ext.onReady(function(){

       var login=new Ext.form.FormPanel({
           title:'使用者註冊',
           id :'userLogin',
           renderTo:'register',
           width:500,
           height:370,
           items:[{
               xtype:'textfield',
               fieldLabel:'使用者名稱',
               allowBlank:false,/*設定不能為空*/
               blankText:'使用者名稱不能為空',
               emptyText:'請輸入使用者名稱',
               name:'userName',
               msgTarget:'side',/*錯誤提示,下方提示under*/
               regex:/^\d{3,10}$/ ,/*正則表示式,固定的數字,必須3到10位*/
               regexText:'使用者名稱長度必須是3-10位的數字',/*正則表示式之後提示*/
               id:'userName'
           },{
               xtype:'textfield',
               fieldLabel:'密碼',
               inputType:'password',/*密碼黑色顯示*/
               name:'userPass',
               id:'userPass'
           },new Ext.form.field.Number({
               fieldLabel:'年齡',
               step:3,/*步長*/
               hideTrigger:true,/*將後面的上下鍵隱藏*/
               allowDecimals:false,  /*不用許出現小數點*/
               maxValue:120,
               maxText:'年齡不能超過120',
               minValue:0,
               minText:'年齡不能小於0'
           }),{
               xtype:'numberfield',/*型別*/
               fieldLabel:'折扣'/*小數點後保留兩位小數*/
           },{
               xtype:'radio',
               boxLabel:'男',
               name:'sex',
               inputValue:'man'
             },{
               xtype:'radio',
               boxLabel:'女',
               name:'sex',
               inputValue:'woman',
               handler:function(obj){/*選擇事件*/
                  /* alert(obj.inputValue);*/
               }
           },{
               xtype:'checkboxfield',
               boxLabel:'足球'
           },{
               xtype:'checkboxfield',
               boxLabel:'羽毛球'
           },{
                xtype:'checkboxfield',
                boxLabel:'兵乓球'
             },{
               xtype:'radiogroup',
               fieldLabel:'性別',
               columns:2,/*設定列數*/
               items:[{
                   boxLabel:'男',
                   name:'sex'
               },{
                   boxLabel:'女',
                   name:'sex'
               }]
           },{
               xtype:'checkboxgroup',
               fieldLabel:'愛好',
               columns:3,
               items:[{
                   boxLabel:'籃球'
               },{
                   boxLabel:'足球'
               },{
                   boxLabel:'橄欖球'
               }]
           }],
           buttons:[{
               text:'登陸'
           },
               {
                   text:'關閉'
               }]
       });

    });
</script>
</body>
</html>