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({
            id:'username',
             200,
            //判断是否允许空白
            allowBlank: false,
            maxLength: 20,
            name: 'username',
            fieldLabel: '用户名称',
            //提示用户信息
            blankText: '请输入用户名',
            maxLengthText: '用户名不能超过20个字符'
        });

        //声明密码文本框
        var pwdfield = new Ext.form.TextField({

             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',
             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',
370
}
获取值的方式为：
var tValue = Ext.getCmp('test').getValue()