EXT入门学习

最新推荐文章于 2022-07-09 10:12:18 发布

weixin_30905133

最新推荐文章于 2022-07-09 10:12:18 发布

阅读量100

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/xxxxBW/p/4260414.html

版权

今天，对EXT做了一下初步的了解，了解了一些基本用的函数、窗体对象、表单、文本域、按钮，一些基本的函数我列了出来，写了个登陆的demo，是根据别人的例子模仿出来的，见谅哈。

基本函数

Ext.onReady();函数： ExtJS Application的入口，相当于java的main()函数

Ext.MessageBox.alert()函数：弹出对话框

窗体对象

var win = new Ext.Window({});创建一个新的Window窗体对象

title:"窗口"：窗体的标题

width:111,height:111:窗体的宽度及高度

iconCls:"loginicon"：窗体标题前的图标

html:"<div>这里是窗体的内容</div>"：窗体内部显示的html内容

resizable:true:是否调整窗体的大小

modal:true:是否为模态窗体（打开这个窗体后不能对其他窗体进行操作）

closable:true:显示关闭按钮

maximizable:true:显示最大化按钮

minimizable:true:显示最小化按钮

win.show():窗体展示

plain:true:强制与背景色保持协调，默认为false

bodyStyle:与边框的间距

buttonAlign:窗体中button的对齐方式left,center,right（默认为right）

方法

show:打开窗体

hide:隐藏窗体

close:关闭窗体

事件

how:打开窗体时触法

hide:隐藏窗体时触法

close:关闭窗体时触法

表单（form组件）

属性

width,height:宽度及高度

url:字符串，表单提交地址

方法

reset:表单重置

isValid:表单是否验证去全部通过

submit:表单提交

文本框

Ext.QuickTips.init();作用是初始化标签中的Ext:Qtip属性，并赋予显示提示的动作

var txtusername = Ext.form.TextField();创建一个新的TextField文本框对象

allowBlank:false:文本框不能为空

maxLength:20:文本框最大长度为20个字符，但是超过时还是可以输入，但会出现警告

name:"password":表单名称，与服务器交互时按name接收post的参数值

fieldLabel:"用户名"：文本框前面显示的文字标题

blankText:"请输入用户名"：当非空较验没有通过时的提示信息

maxLengthText:"用户名不能超过20个字符"：当最大长度校验没有通过时的提示信息

按钮

var btnsubmit = new Ext.Button();创建一个新的Button按钮对象

text:"提交"：按钮上的文字

事件

handler:首发方法处理事件（是一个特殊的listener）

listeners:事件监听(事件名+处理函数)

登陆窗口demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登陆页面</title>
		<script type="text/javascript" src="Ext/adapter/ext/ext-base.js" ></script>
		<script type="text/javascript" src="Ext/ext-all.js" ></script>
		<link rel="stylesheet" href="Ext/resources/css/ext-all.css" />
		<style type="text/css">
			.loginicon
			{
				background-image: url(img/2012062119234296.gif) !important;			
			}
		</style>
		<script>
			Ext.onReady(function(){
				Ext.QuickTips.init();
				Ext.form.Field.prototype.msgTarget = "side";
				var btnsubmitclick = function(){
					if(form.getForm().isValid()){
						Ext.MessageBox.alert("提示","登陆成功！");
					}
				}
				var btnresetclick = function(){
					form.getForm().reset();
				}
				var txtusername = new Ext.form.TextField({
					width:147,
					allowBlank:false,
					maxLength:10,
					fieldLabel:"用户名",
					blankText:"请输入用户名",
					maxLengthText:"用户名不能超过10个字符"
				});
				var txtpassword = new Ext.form.TextField({
					width:147,
					allowBlank:false,
					maxLength:10,
					name:"password",	
					fieldLabel:"密码",
					blankText:"请输入密码",
					maxLengthText:"密码不能超过10个字符"
				});
				var txtcheckcode = new Ext.form.TextField({
					width:80,
					allowBlank:false,
					maxLength:4,
					fieldLabel:"验证码",
					id:"checkcode",
					blankText:"请输入验证码",
					maxLengthText:" 验证码为4个字符"
				});
				var btnsubmit = new Ext.Button({
					text:"登陆",
					handler:btnsubmitclick
				});
				var btnreset = new Ext.Button({
					text:"重置",
					handler:btnresetclick
				});
				var form = new Ext.form.FormPanel({
					url:"********",
					labelAlign:"right",
					labelWidth:45,
					cls:"loginform",
					buttonAlign:"center",
					frame:true,
					width:230,
					height:140,
					style:"margin:3px",
					html:"<div></div>",
					items:[txtusername,txtpassword,txtcheckcode],
					buttons:[btnsubmit,btnreset]
				});
				var win = new Ext.Window({
					title:"登陆窗口",
					iconCls:"loginicon",
					plain:true,
					width:250,
					height:180,
					resizable:false,
					shadow:true,
					modal:true,
					html:"<div></div>",
					closable:true,
					maximizable:true,
					minimizable:true,
					animCollapse:true,
					items:form
				});
				win.show();
				var checkcode = Ext.getDom("checkcode");
				var checkimage = Ext.get(checkcode.parentNode);
				checkimage.createChild({
					tag:"img",
					src:"img/checkcode.gif",
					align:"absbottom",
					style:"padding-left:20px;cursor:pointer;"
				});
			});
			
		</script>
	</head>
	<body>
		
	</body>
</html>

转载于:https://www.cnblogs.com/xxxxBW/p/4260414.html

weixin_30905133

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXT入门学习

今天，对EXT做了一下初步的了解，了解了一些基本用的函数、窗体对象、表单、文本域、按钮，一些基本的函数我列了出来，写了个登陆的demo，是根据别人的例子模仿出来的，见谅哈。基本函数Ext.onReady();函数： ExtJS Application的入口，相当于java的main()函数Ext.MessageBox.alert()函数：弹出对话框窗体对象var win ...
复制链接

扫一扫