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 脚本将当地时间转换成其它时区
Mar 19 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
微信小程序 开发之全局配置
May 05 Javascript
react 组件传值的三种方法
Jun 03 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
VUEX-action可以修改state吗
Nov 19 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python读取文本中的坐标方法
2018/10/14 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python对象的属性访问过程详解
2020/03/05 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
高中毕业自我鉴定
2013/12/16 职场文书
五好党支部事迹材料
2014/02/06 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
爱心募捐感谢信
2015/01/22 职场文书
合作合同协议书范本
2015/01/27 职场文书
儿子满月酒致辞
2015/07/29 职场文书
靠谱的活动总结
2019/04/16 职场文书