标签:
今天,对EXT做了一下初步的了解,了解了一些基本用的函数、窗体对象、表单、文本域、按钮,一些基本的函数我列了出来,写了个登陆的demo,是根据别人的例子模仿出来的,见谅哈。
Ext.onReady();函数: ExtJS Application的入口,相当于java的main()函数
<!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>
标签:
原文地址:http://www.cnblogs.com/xxxxBW/p/4260414.html