ExtJs中简单的登录界面制作方法


Posted in Javascript onAugust 19, 2010

一 首先请看图片 
ExtJs中简单的登录界面制作方法
二 登陆界面Ext代码

/// <reference path="http://https://3water.com/Resources/ExtJs/vswd-ext_2.0.2.js" /> 
//加载提示框 
Ext.QuickTips.init(); 
//创建命名空间 
Ext.namespace('XQH.ExtJs.Frame'); 
//主应用程序 
XQH.ExtJs.Frame.app = function() { 
} 
Ext.extend(XQH.ExtJs.Frame.app, Ext.util.Observable, { 
LoginLogo:new Ext.Panel({ 
id: 'loginLogo', 
height: 35, 
frame:true, 
bodyStyle:'padding-top:4px', 
html:'<h3><center>后台Ext框架</center></h3>' 
}), 
//登陆表单 
LoginForm: new Ext.form.FormPanel({ 
id: 'loginForm', 
defaultType: 'textfield', 
labelAlign: 'right', 
labelWidth: 60, 
frame: true, 
defaults: 
{ 
allowBlank: false 
}, 
items: 
[ 
{ 
name:'LoginName', 
fieldLabel: '登陆账号', 
blankText: '账号不能为空', 
emptyText:'必填', 
anchor: '98%' 
}, 
{ 
name:'LoginPsd', 
inputType: 'password', 
fieldLabel: '登陆密码', 
blankText: '密码不能为空', 
maxLength:10, 
anchor: '98%' 
} 
] 
}), 
//登陆窗口 
LoginWin: new Ext.Window({ 
id: 'loginWin', 
Title: '登陆', 
width: 250, 
height: 150, 
closable: false, 
collapsible: false, 
resizable:false, 
defaults: { 
border: false 
}, 
buttonAlign: 'center', 
buttons: [ 
{ text: '关于' }, 
{ text: '登陆' } 
], 
layout: 'column', 
items: 
[ 
{ 
columnWidth:1, 
items: Ext.getCmp("loginLogo") 
}, 
{ 
columnWidth: 1, 
items: Ext.getCmp("loginForm") 
} 
] 
}), 
//初始化 
init: function() { 
this.LoginWin.show(); 
} 
}); 
//程序入口 
Ext.onReady(function() { 
var loginFrame = new XQH.ExtJs.Frame.app(); 
loginFrame.init(); 
});

三 使用心得  

1./// <reference path="https://3water.com/Resources/ExtJs/vswd-ext_2.0.2.js" />这句为ext自动提示功能源文件

2.关于ext界面布局常用的有border,column,fit这几种,详细用法以后再作介绍

3.关于ext使用,其实大部分就是window,panel里面镶嵌自己需要的内容,如formpanel(表单)。

4.要理解{object config},其实大部分ext配置项都是基于这种形式的,{名称:值},如按钮{text:'l登陆'}

5.书写ext代码最好规范化,这样可以减少出错率。

大概形式:

{ 




id:'',(最好写上) 




配置信息, 




(如果是最外层的别忘了写layout,布局模式) 



}

PS:欢迎大家补充,提意思。

Javascript 相关文章推荐
实现JavaScript中继承的三种方式
Oct 16 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
使用Ajax实现进度条的绘制
Apr 07 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 #Javascript
JS面向对象编程之对象使用分析
Aug 19 #Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 #Javascript
jquery插件之easing使用
Aug 19 #Javascript
为Extjs加加速(javascript加速)
Aug 19 #Javascript
原创javascript小游戏实现代码
Aug 19 #Javascript
jQuery与ExtJS之选择实例分析
Aug 19 #Javascript
You might like
PHP 事件机制(2)
2011/03/23 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
在python中求分布函数相关的包实例
2020/04/15 Python
python中doctest库实例用法
2020/12/31 Python
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
财务总监管理职责范文
2014/03/09 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2015年双拥工作总结
2015/04/08 职场文书
2015年教研组工作总结
2015/05/04 职场文书
2015年电教工作总结
2015/05/26 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书