<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()