zoukankan      html  css  js  c++  java
  • EXT入门学习

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

    基本函数

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

    Ext.MessageBox.alert()函数:弹出对话框
     
    窗体对象
    var win = new Ext.Window({});创建一个新的Window窗体对象
    title:"窗口":窗体的标题
    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({
    					147,
    					allowBlank:false,
    					maxLength:10,
    					fieldLabel:"用户名",
    					blankText:"请输入用户名",
    					maxLengthText:"用户名不能超过10个字符"
    				});
    				var txtpassword = new Ext.form.TextField({
    					147,
    					allowBlank:false,
    					maxLength:10,
    					name:"password",	
    					fieldLabel:"密码",
    					blankText:"请输入密码",
    					maxLengthText:"密码不能超过10个字符"
    				});
    				var txtcheckcode = new Ext.form.TextField({
    					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,
    					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,
    					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>
    

      

     
     
     
     
     
     
     
     
     
     
        
  • 相关阅读:
    『Python基础』第3节:变量和基础数据类型
    Python全栈之路(目录)
    前端
    Python十讲
    Ashampoo Driver Updater
    druid 连接池的配置
    webService 入门级
    pom
    pom----Maven内置属性及使用
    webservice 总结
  • 原文地址:https://www.cnblogs.com/xxxxBW/p/4260414.html
Copyright © 2011-2022 走看看