<pre name="code" class="html"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--ExtJs框架开始-->
<link rel="stylesheet" type="text/css" href="./ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="./ext-4.2.1/resources/css/ext-theme-neptune.js"></script>
<script type="text/javascript" src="./ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
.loginicon{
//background-image: ;
}
.x-form-unit
{
height: 22px;
line-height: 22px;
padding-left: 5px;
display: inline-block;
display: inline;
}
</style>
<!--ExtJs框架结束-->
<script type="text/javascript">
//----------------------重写文本框开始----------------------//
Ext.override(Ext.form.TextField, {
unitText: '',
onRender:function(ct, position){
Ext.form.TextField.superclass.onRender.call(this, ct, position);
if (this.unitText != '') {
var tr =document.getElementById(ct.getAttribute("id")).childNodes[position].getElementsByTagName("input")[0].parentNode.parentNode;
var unit ={
tag: 'div',html: this.unitText,width:'200px'
}
var unitEl = ct.createChild(unit,ct.child(),true);
unitEl.className +=" x-form-unit";
var newTd = document.createElement("td");
newTd.style.width=this.unitText.length*20+"px";
this.width +=this.unitText.length*20;
newTd.appendChild(unitEl);
tr.appendChild(newTd);
}
}
});
//----------------------重写文本框结束----------------------//
Ext.onReady(function () {
//QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
Ext.QuickTips.init();
//TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，
//side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
Ext.form.Field.prototype.msgTarget = 'side';
//创建一个新的TextField文本框对象。
var txtusername = new Ext.form.TextField({
width: 215,
unitText: ' cm左右',
labelWidth:60, //fieldLabel 的长度
allowBlank: false, //是否允许文本框为空。
maxLength: 20, //文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
name: 'username',
fieldLabel: '用户名称',
emptyText:'请输入用户名',
blankText: '请输入用户名', //当非空校验没有通过时的提示信息。
maxLengthText: '用户名不能超过20个字符' //当最大长度校验没有通过时的提示信息。
//maskRe: //用于过滤不匹配字符输入的正则表达式
});
//----------------------数字字段开始----------------------//
var numberfield = new Ext.form.NumberField({
fieldLabel: '身高',
labelWidth:60,
width: 180,
decimalPrecision: 2,
minValue: 0.01,
maxValue: 200,
unitText: ' cm',
allowBlank: false,
blankText: '请输入身高',
value:100
});
//----------------------隐藏域字段开始----------------------//
var hiddenfield = new Ext.form.Hidden({
name: 'userid',
value: '1'
});
//----------------------隐藏域字段结束----------------------//
//----------------------日期字段开始----------------------//
var datefield = new Ext.form.DateField({
fieldLabel: '出生日期',
labelWidth:60,
format: 'Y-m-d',
editable: false,
allowBlank: false,
blankText: '请选择日期'
});
//----------------------日期字段结束----------------------//
//----------------------单选组开始----------------------//
var radiogroup = new Ext.form.RadioGroup({
fieldLabel: '性别',
labelWidth:60,
width: 150,
items: [{
name: 'sex',
inputValue: '0',
boxLabel: '男',
checked: true
}, {
name: 'sex',
inputValue: '1',
boxLabel: '女'
}]
});
//重置按钮"鼠标悬停"处理方法
var btnresetmouseover = function () {
Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!');
}
//重置按钮"点击时"处理方法
var btnresetclick = function () {
form.getForm().reset(); //重置表单。
Ext.MessageBox.alert('提示', '你点了重置按钮!');
}
//重置按钮
var btnreset = new Ext.Button({
text: '重置',
//事件监听。两个事件"click"，与"mouseover"事件，并且会顺序执行。
listeners: {
'mouseover': btnresetmouseover,
'click': btnresetclick
}
});
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
var form = new Ext.form.FormPanel({
frame: true,
title: '表单标题',
style: 'margin:10px',
url:'xxxxxxxxx', //表单提交地址。
buttonAlign: 'center',
bodyStyle: 'padding:6px 0px 0px 15px',
html: '<div style="padding:10px">登陆界面</div>',
items: [txtusername,hiddenfield,datefield,radiogroup,
numberfield,
{xtype:'textfield',id:'email',name:'email',fieldLabel:'邮箱',labelWidth:60,emptyText:'请输入邮箱',vtype: 'email'},
{xtype: 'combobox',fieldLabel: 'State',name: 'state',labelWidth:60,
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
}),
valueField: 'abbr',
displayField: 'name',
typeAhead: true,
queryMode: 'local',
renderTo: Ext.getBody(),
emptyText: 'Select a state...'
},
//第二种文本输入框写法
{xtype:'textfield',inputType:'password',id:'password',name:'password',fieldLabel:'密码',labelWidth:60,emptyText:'请输入密码'},
{xtype:'textfield',id:'checkcode',name:'checkcode',fieldLabel:'验证码',labelWidth:60,emptyText:'请输入验证码'}
],
buttons: [{type:'button',text:"提交",
//handler是一个特殊的listener。执行的是首发事件,比如 [button]的首发方法事件是click事件
handler:function(){
if (form.getForm().isValid()) { //isValid()：校验表单的验证项是否全部通过
Ext.Msg.alert("提示", "登陆成功!");
}
}
}, btnreset]
});
//创建一个新的Window窗体对象。
var win = new Ext.Window({
title: '窗口', //窗体的标题。
width: 476,
height: 374,
shadow: true,
iconCls: 'loginicon', //给窗体加上小图标
//bodyStyle:"padding:10px" //与边框的间距
resizable: true, //是否可以调整窗体的大小
modal: true, //是否为模态窗体[什么是模态窗体？当你打开这个窗体以后，如果不能对其他的窗体进行操作，那么这个窗体就是模态窗体，否则为非模态窗体]。
closable: true, //是否可以关闭，也可以理解为是否显示关闭按钮。
maximizable: true, //true表示显示最大化按钮，默认值为false。
minimizable: true, //true表示显示窗体时将窗体最大化，默认值为false。
items: form
//html:'<div>窗体内部显示的html内容。</div>',
//closeAction:"close" //"close"释放窗体所占内存，"hide"隐藏窗体，建议使用"hide"。
});
win.show(); //窗体展示。
//win.hide(); //隐藏窗体。
//win.close(); //关闭窗体。
var checkcode = Ext.getDom('checkcode').parentNode; //根据ID获取Dom
Ext.get(checkcode).createChild( //根据Dom获取父节点并创建子节点
{tag: 'img',src: './image/tb-sprite.gif',align: 'absbottom',style: 'padding-left:23px;cursor:pointer;'}
);
});
</script>
</head>
<body>
<!-- 看啥看 -->
<div id = "mydiv"></div>
</body>
</html>ExtJS入门
最新推荐文章于 2021-05-08 22:04:18 发布
4561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
