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

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【ExtJs中简单的登录界面制作方法】，下面是详细的讲解！

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

/// <reference path="http://http://www.jb51.net/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();
});

关于ExtJs中简单的登录界面制作方法的用户互动如下：

　　相关问题：html网页设计：一个简单的登录界面代码！

　　答： 登陆界面 样式 ： *{ margin:0; padding:0;} li{ list-style-type:none; margin:0; padding:0;} a{ text-decoration:none; color:#000;} /*---------------------按钮-----------------------------*/ .login_putin ul li input{ margin: 0; wi... >>详细

　　相关问题：C#.net中设计一个最简单的登录界面

　　答：设计登录窗口的思想是这样的：一、在加载主窗口时候（即Load事件中）加载登录窗口二、在登录窗口中点击“登录”按钮时候发生下面的事情1.声明变量userName并获取用户名文本框输入的内容，声明变量pwd并获取密码文本框输入的内容。2.判断userName是... >>详细

　　相关问题：易语言登录界面如何制作

　　答：两个编辑框一个按钮 .版本 2 .子程序 _按钮1_被单击 .如果 (编辑框1.内容 ＝ “账号”) .如果 (编辑框2.内容 ＝ “密码”) 载入 (窗口1, , 真) ' 这里写成功的信息比如前面的 .否则 信息框 (“密码错误”, 0, ) ' 这里写错误信息 .如果结束 .否则 信息... >>详细