1. 程式人生 > 實用技巧 >EXTJS4.2——3.2在上面的基礎上新增button

EXTJS4.2——3.2在上面的基礎上新增button

<script src="~/Scripts/Extjs4.2/ext-all.js"></script>
<link href="~/Scripts/Extjs4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" />
<script src="~/Scripts/Extjs4.2/ext-theme-neptune.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script>
    Ext.onReady(function () {
        //宣告使用者名稱文字框
        var userfield = new Ext.form.TextField({
 
            width: 200,
            //判斷是否允許空白
            allowBlank: false,
            maxLength: 20,
            name: 'username',
            fieldLabel: '使用者名稱稱',
            //提示使用者資訊
            blankText: '請輸入使用者名稱',
            maxLengthText: '使用者名稱不能超過20個字元'
        });

        //宣告密碼文字框
        var pwdfield = new Ext.form.TextField({

            width: 200,
            height:20,
            allowBlank: false,
            maxLength: 20,
            inputType: 'password',
            name: 'password',
            fieldLabel: '密碼',
            maxLengthText:'密碼不能超過20個字元'
        });

        //設定了button,但是並沒有進行判斷處理,只是添加了一個按鈕
        var submit = new Ext.button.Button({
            text: '提交',
            handler: function () {
                alert('你點選了提交按鈕!');
            }
        })

        //聲音panel來放置兩個文字框
        Ext.create('Ext.form.Panel', {
            title: 'Login',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [userfield,pwdfield,submit]
        });

    })
</script>

如果要進行資料判斷處理,則要學會使用JS,進行獲取資料,然後進行判斷。