ExtJs学习小结LoginDemo
1、示例：（登录界面）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script> <script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script> <style type="text/css"> .loginicon { background-image: url(image/login.gif) !important; } </style> <script type="text/javascript"> Ext.onReady(function() { //初始化标签中的Ext:Qtip属性 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; //提交按钮点击事件 var btnsubmitclick = function(){ if(form.getForm().isValid()){ //通常发送到服务器端获取返回值再进行处理，我们在以后的教程中再讲解表单与服务器的交互问题。 Ext.Msg.alert('提示','登录成功'); }else{ Ext.Msg.alert('警告','输入项有的不符合规则,请检查!'); } } //重置按钮点击事件 var btnresetclick = function(){ form.getForm().reset(); } //提交按钮 var btnsubmit = new Ext.Button({ text : '提 交', handler : btnsubmitclick }); //重置按钮 var btnreset = new Ext.Button({ text : '重 置', handler : btnresetclick }); //用户名input var txtusername = new Ext.form.TextField({ width : 240, allowBlank : false, maxLength : 20, name : 'username', fieldLabel : '用户名称', blankText : '请输入用户名', maxLengthText : '用户名输入不能超过20个字符' }); //密码input var txtpwd = new Ext.form.TextField({ width : 240, allowBlank : false, maxLength : 20, name : 'password', inputType : 'password', fieldLabel : '密码', blankText : '请输入密码', maxLengthText : '密码输入不能超过20个字符' }); //验证码input var txtcheckcode = new Ext.form.TextField({ fieldLabel : '验证码', id : 'checkcode', allowBlank : false, width : 176, blankText : '请输入验证码', maxLength : 4, maxLengthText : '验证码不能超过四个字符!' }); var form = new Ext.form.FormPanel({ frame : true, // url : '***', labelAlign : 'right', labelWidth : 45, // cls : 'loginform', buttonAlign : 'center', bodyStyle : 'padding:6px 0px 0px 15px', items : [txtusername,txtpwd,txtcheckcode], buttons : [btnsubmit,btnreset] }); var win = new Ext.Window({ title : '用户登录', iconCls : 'loginicon', plain : true, width : 300, height : 200, resizable : false, shadow : true, modal : true, closable : true, animCollapse : true, items : form }); win.show(); //创建验证码 var checkcode = Ext.getDom('checkcode'); var checkimage = Ext.get(checkcode.parentNode); checkimage.createChild({ tag : 'img', src : 'image/checkcode.gif' ,style : 'padding-left:23px;cursor:pointer;' }); }); </script> </head> <body> <!-- 说明： (1)iconCls: 'loginicon':给窗体加上小图标，样式在style中定义。 (2)Ext.getDom('checkcode')：根据ID获取Dom。 (3)Ext.get(checkcode.parentNode)：根据Dom获取父节点。 (4)checkimage.createChild()：创建子节点，标签为<img src='image/checkcode.gif'..../>。 (5)form.getForm().isValid()：校验表单的验证项是否全部通过。 (6)form.getForm().reset()：重置表单。 --> </body> </html>
2、效果图：
【说明：这个地方有两个地方有问题：(1)输入项前面的字体我设置的是右对齐，但是显示的左对齐 (2)下面的验证码图片应该是在验证码输入框右边的，结果却跑到下面去了。由于刚接触这个东西，不太了解，还望高手看到后能给解答一下，万分感谢！！！】
3、图片下载：
登录标题上的图标
验证码图标