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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 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
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
php微信开发之谷歌测距
2018/06/14 PHP
JS 对象介绍
2010/01/20 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
基于Django与ajax之间的json传输方法
2018/05/29 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python gdal安装与简单使用
2019/08/01 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Python的信号库Blinker用法详解
2020/12/31 Python
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
小学教师事迹材料
2014/01/13 职场文书
供货协议书范本
2014/04/22 职场文书
搬迁通知
2015/04/20 职场文书
Django drf请求模块源码解析
2021/06/08 Python