首先是效果图:
这是一个用ext3.2.0，js，html和css写的很好的登录界面。
源代码已经上传了。请点击:点击下载地址的打开链接。
主要难点是如何使用extjs绘制界面。接下来，让我们看看html和JS:
<!DOCTYPE html><html lang=”en”><head> <meta charset=”UTF-8″> <title>登录界面</title> <link rel=”stylesheet” type=”text/css” href=”ext3.2.0/resources/css/ext-all.css”/> <script type=”text/jascript” src=”ext3.2.0/adapter/ext/ext-base.js”></script> <script type=”text/jascript” src=”ext3.2.0/ext-all.js”></script> <script type=”text/jascript” src=”login.js”></script> <script type=”text/jascript” src=”loginToDo.js”></script> <link rel=”stylesheet” type=”text/css” href=”login.css”/></head><body onkeydown=”keyLogin(event);”></body></html>
主要有导入页面需要的js和css文件，当然还有另外一个亮点，body标签上的onkeydown事件属性，主要用来监听键盘，实现我们js中的回车键提交功能。然后看extjs的语言风格:
Ext.onReady(function () { // 创建“登录”面板 var loginPanel = new Ext.Panel({ // 设置面板的位置、宽高、样式 // 注意：此处我用的是相对布局relative（用于比较两者的区别） id: ‘loginPan’, x: 363, y: 0, width: 396, height: 480, baseCls: ”, defaults: { border: false }, // 添加面板里面的物品 items: [ { // 第一件：logo图 id: ‘loginLogo’, height: 160, frame: false, bodyStyle: ‘padding-top:10px’, html: ‘<img src=”images/fly_icon.png”>’ }, { // 第二件：登录的表单 id: ‘loginForm’, defaultType: ‘textfield’, frame: false, defaults: { allowBlank: false }, // 添加表单里面的物品：两个输入框 items: [ { id: “username”, cls: “text_field”, inoutType: ‘text’, width: 330, height: 28, blankText: ‘账号不能为空’, emptyText: ‘请输入账号’, }, { id: “password”, cls: “text_field”, inputType: ‘password’, width: 330, height: 28, emptyText: ‘请输入密码’, blankText: ‘密码不能为空’, }] }, { // 第三件：忘记密码 id: ‘loginForget’, html: “<a href=’forget_pwd.html’ target=’_blank’>忘记密码？</a>”, }, { // 第四件：登录按钮 id: ‘loginBtn’, html: ‘<button id=”btn_login”>马上登录</button>’, } ], }); // 创建“注册”面板 var registerPanel = new Ext.Panel({ // 设置面板的位置、宽高、样式 // 注意：此处我用的是绝对布局absolute（用于比较两者的区别） id: ‘registerPan’, x: 0, y: 46, width: 800, height: 389, baseCls: ”, layout: ‘absolute’, defaults: { border: false }, // 添加面板里面的物品 items: [ { // 第一件：标题 id: ‘registerTitleLabel’, xtype: ‘label’, x: 47, y: 50, text: ‘还没有账号？’, }, { // 第二件：正文 id: ‘registerContentLabel’, xtype: ‘label’, x: 47, y: 135, text: ‘这是在注册面板下面的正文内容。里面的内容可以随便写，比如当前我们再一个窗口下面建立了两个面板。而两个面板的布局是分别用相对布局和绝对布局来实现的。相比较而言，我觉得用绝对布局会简单粗暴，更直接，更方便。总之，你们自己体会一下吧。’, }, { // 第三件：注册按钮 id: ‘registerBtn’, xtype: ‘button’, x: 47, y: 280, html: ‘<button id=”btn_register” >马上注册</button>’ }], }); // 创建窗口，从而让内容达到居中效果 var centerWindow = new Ext.Window({ baseCls: ”, width: 800, height: 480, layout: ‘absolute’, closable: false, draggable: false, resizable: false, shadow: false, border: false, items: [registerPanel, loginPanel], }); // 显示窗口 centerWindow.show(); // 添加浏览器缩放自动居中效果 Ext.EventManager.onWindowResize(function () { centerWindow.center(); });});
这里我想说的是:1。注意标记属性，可以的话用id。cls只是一个打包的类，和原生类还是有区别的。例如，为cls元素的高度和填充定义样式不起作用。详见:关于extjs中的cls ≠ class。
2.建议在ext中使用绝对定位。因为它的底层是一个table和div块，如果用相对定位，有时会有偏差，所以绝对定位方便直接。
3.窗口有自己的居中效果，可以用来使元素在屏幕上居中。但是浏览器缩放时，这个窗口不会移动，每次都需要刷新才能改变。因此，在上面代码的最后，我们给这个centerWindow添加了一个窗口自适应居中效果。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
