EXTJS4.2——3.2在上面的基础上添加button

Posted 2020-12-13 LY-CS

<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({
            id:\'username\',
            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 () {
                //获取控件数值有多种方式，这一种是获取Ext控件才采用的方法
                if (Ext.getCmp(\'username\').getValue() == "admin")
                { alert(\'你点击了提交按钮!\'); }
            }
        })

        //声音panel来放置两个文本框
        Ext.create(\'Ext.form.Panel\', {
            title: \'Login\',
            width: 300,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [userfield,pwdfield,submit]
        });

    })
</script>

Extjs4.2获取文本框中数值的多种方式：
1、html文本框
如：
获取值的方式为：
var tValue = Ext.getDom(\'test\').value;
或者
var tValue = document.getElementById(\'test\').value
2、ExtJs的组件
如：{
id:\'test\',
xtype:\'textfield\',
fieldLabel:\'  测试\',
name:\'test\',
width:370
}
获取值的方式为：
var tValue = Ext.getCmp(\'test\').getValue()