ExtJS用户登录界面

[size=large]首先：鉴于目前自己在学习ExtJS，也把自己学习中的一些东西给大家分享，我看网上很多朋友都很关注Extjs的，我自己也刚开始学习没多久！把《EXTJS WEB应用程序开发指南》从头到尾也看了俩遍，这本书讲得不算深入，但对于API讲解得比较多，在某种程度上讲可以看作这是中文版的API,如果是还没有入门的朋友可以去买来看看，我看完这本书的感觉就是知道EXT的基本大概结构，说到实际能弄出个什么东西来还真不好讲！只能说知道怎样去查API文档了！至于想进一步的深入或者提高的话我建议把官方的例子全部自己做一次，而且可以看一下《JavaScript凌厉开发--Ext详解与实践》相对来讲这本更适合进阶或者说是提高，跟实际结合得更紧，如果完全没有EXT基础就看这本的话，一开始肯定有点吃力，从这本书中我其实还是能看到作者的用心！也不像某些网友说的那么不好！
其次：在这些教程中我都会写一些自己原创的东西给大家分享，如果大家转载务必注明出处！
这部分教程我会先从界面方面讲，后面会讲数据交互方面，至于数据交互方面我会从PHP和J2EE方面去讲！对PHP和J2EE我了解的也只是皮毛！
最后：至于代码方面我会完全的让代码完整，保证需要的人COPY过去就能跑起来，布局排版方面我也会做到完善，因为自己也是做美工方面！希望有更多的人支持！[/size]

[color=blue][size=medium]下面让我们从一个简单的登陆的界面中看看EXT的效果！[/size][/color]

[img]http://lovebeyond.iteye.com/upload/attachment/129285/7f91a59b-fe79-3e6c-95d2-ed53b77834ec.jpg[/img]



/*index.php 代码*/

<html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>login</title><style type="text/css">body,html{height:100%;margin:0px;padding:0px;}#outer{height:100%;overflow:hidden;position:relative;width:100%;}#outer[id] {display:table;position:static;}#middle {position:absolute;top:50%;left:50%;}#middle[id]{display:table-cell;vertical-align:middle;position:static;}#inner{position:relative;top:-50%;width:310px;left:50% !important;left:-155px;}#container{width:310px;height:190px;margin-left:auto;margin-right:auto;}</style><link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /><script type="text/javascript" src="../../adapter/ext/ext-base.js"></script><script type="text/javascript" src="../../ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){   Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget="qtip"; var loginform = new Ext.form.FormPanel({     renderTo:'container',       title:'会员登陆',       labelSeparator:":",     collapsible :true,        width:300,        height:160,       id:'login',     labelWidth: 80,       bodyStyle: 'padding:5px 5px 0 0',       border: false,        name:'login',       frame:true,       defaults:{width:178,xtype:'textfield'},     items:[           new Ext.form.TextField({          fram:true,            fieldLabel:"用户名",           name:'userName',            allowBlank:false,         blankText:'用户名不能为空'     }),{          fieldLabel:"密码",            name:'password',            allowBlank:false,         inputType:'password',           blankText:'密码不能为空'      },{           name: 'vcode',          id: 'vcode',            fieldLabel: '验证码',          maxLength: 4,         width: 80,            allowBlank: false,            blankText: '验证码不能为空!'                   }],       keys:{            key: 13,          fn:login      },        buttons:[{            text:'提 交',         handler:login     },{           text:'重置',handler:function(){               loginform.form.reset();           }     }]    });   function login(){

   }

})</script></head><body><!-- div实现水平和垂直居中IE7的效果是正常的，FF3.0在水平居中上有一点差距，弄不好 --><div id="outer">    <div id="middle">        <div id="inner">     <div id="container">

       </div>      </div>  </div></div> </body></html>

ExtJS用户登录界面相关推荐

Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
用户登录界面 - 记事本风格HTML代码
简介: 这是一个记事本风格的用户登录界面,非常逼真,HTML 代码已经改成了中文的,经过测试,兼容 IE6+.Firefox.Chrome 等浏览器. 优化了自适应问题. 喜欢的可以下载. 从dowe ...
php简单的登录界面,PHP实现简单用户登录界面
用PHP实现简单的用户登录界面,供大家参考,具体内容如下首先要实现用户登录界面需要一个html登录表单用户名: 密码: 重复密码: 然后开始按照流程图写PHP代码 if(trim($_POST[' ...
android studio 微信登录界面,如何使用Android Studio开发用户登录界面
满意答案 zhou9081 2016.05.21 采纳率:51% 等级:7 已帮助:411人如何使用Android Studio开发用户登录界面,具体解决方案如下: 解决方案1: <:t ...
用Java实现用户登录界面
基本步骤 1.创建一个窗体 2.给按钮加上监听 3.获取界面输入框中的值给监听 4.存储用户信息 5.实现登录注册逻辑 1.创建一个窗体 public void LE(){JFrame jf=new ...
[bat] cmd命令进入用户登录界面和屏幕保护程序
[bat] cmd命令进入用户登录界面和屏幕保护程序 cmd命令进入用户登录界面 rundll32.exe user32.dll,LockWorkStation cmd命令进入屏幕保护程序 C:\Wi ...
微信小程序用户登录界面，用户名无法切换输入法问题解决方法
[问题描述] iOS下,用户登录界面,两个相邻的input,第一个输入用户名,第二个输入密码(password),若用户手机中只有英文输入法和搜狗输入法的话,点击第一个用户名输入框,会发现出来的键盘是 ...
用户登录界面的测试用例
用户登录界面如何测试这个界面上有两个输入框,一个提交按钮. 在面试时经常会被问到这道题,考察点是面试者是否熟悉各种测试方法.首先,可以询问面试官用户的需求.例如这个登录界面应该是弹出窗口还是直接在网 ...
一个简单的用户登录界面
今天我们学习了如何实现一个简单的用户登陆界面,具体要用到两个jsp和一个servlet,具体操作如下: 首先创建一个用户登录界面,inputview.jsp,其源代码如下所示: <!DOCTYP ...

ExtJS用户登录界面

ExtJS用户登录界面相关推荐

最新文章

热门文章