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

一 首先请看图片 

二 登陆界面Ext代码

代码如下:

/// <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();
});

三 使用心得  
  1./// <reference path="http://www.jb51.net/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:欢迎大家补充,提意思。

(0)

相关推荐

  • ExtJs 表单提交登陆实现代码

    1 在子类中添加单击提交事件 复制代码 代码如下: //登陆按钮单击事件 loginFun: function() { var f = Ext.getCmp("loginForm"); //表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: "请稍候", waitMsg: '正在登陆...', url: 'http://www.cnblogs.com/Service/SystemService/SystemSe

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

    一 首先请看图片 二 登陆界面Ext代码 复制代码 代码如下: /// <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

  • Android开发中简单设置启动界面的方法

    本文实例讲述了Android开发中简单设置启动界面的方法.分享给大家供大家参考,具体如下: 启动界面的意义是为了让后台处理耗时的复杂工作,当工作处理完成后,即可进入主界面.相比让用户等待布局加载完成,使用一张图片作为启动背景,会带来更好的体验. 首先,需要建立一个简单的布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas

  • FineReport中自定义登录界面的方法

    FineReport报表软件是一款纯Java编写的.集数据展示(报表)和数据录入(表单)功能于一身的企业级web报表工具,它"专业.简捷.灵活"的特点和无码理念,仅需简单的拖拽操作便可以设计复杂的中国式报表,搭建数据决策分析系统. 在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. 自定义登录界面 1)登录界面设置 自定义html登录页面:

  • 如何利用PyQt5制作一个简单的登录界面

    目录 环境配置 额外工具配置 生成UI界面 总结 环境配置 新建python虚拟环境并激活 conda create -n pyqt python=3.8 conda activate py36 安装pyqt5 pip install pyqt5 安装pyqt5-tools pip install pyqt5-tools 在PyCharm中新建一个qtdemo工程,并使用这个新建的python虚拟环境作为工程环境 额外工具配置 依次点击File---Settings---Tools---Exte

  • Android中使用Kotlin实现一个简单的登录界面

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,被称之为 Android 世界的Swift,由 JetBrains 设计开发并开源. Kotlin 可以编译成Java字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行. 在Google I/O 2017中,Google 宣布 Kotlin 成为 Android 官方开发语言. 刚接触Kotlin的第一天,仿照QQ的登录界面,先写一个简单的登录界面,虽然笔者用的不是很熟,还在慢慢摸索,但是Kotlin是真

  • java实现简单QQ登录界面

    本文实例为大家分享了java实现简单QQ登录界面的具体代码,供大家参考,具体内容如下 java在图形界面,不是太强项,但不是不可以做,它的开源是very nice! 实现代码如下(想实现完美的界面,可能要更多coding的支持): package com.ts.x.swing; import java.awt.Color; import java.awt.Container; import java.awt.Cursor; import java.awt.Font; import java.aw

  • 在koa中简单使用Websocket连接的方法示例

    目录 前言 ws模块安装 websocket初始化 websocket下发数据 总结 前言 在一次项目需求会上,有个新需求是要让用户从管理后台主动下发数据到app前端,从而让前端那边对这主动下发的数据做一些用户交互.实现思路很清晰,用Websocket的方式.Websocket 是一种自然的全双工.双向.单套接字连接,是建立在 TCP 协议上的. 相比于 HTTP 协议,Websocket 链接一旦建立,即可进行双向的实时通信: ws模块安装 由于后台是基于node+koa2+mongo进行开发

  • Android Studio实现简易登录界面制作

    想要制作一个简易的登录界面非常容易,总体上来说就是UI布局.给定id.新建跳转的页面.以及输入账号密码的获取与判断,那么接下来就开始制作吧! 1.首先就是Activity中的组件布局,这个就不一一列举了!自己把两个EditText和一个Button摆好就ok了,像按钮的点击效果可以自己设计一下(默认状态是什么颜色,按下去是什么颜色). 2.再一个就是要给定控件一个id <?xml version="1.0" encoding="utf-8"?> <

  • C# winform主界面打开并关闭登录界面的方法

    在winform 界面编程中,我们有时候要在主界面打开之前先显示登录界面,当登录界面用户信息校验正确后才打开主界面,而这时登陆界面也完成使命该功成身退了. 目前有两种方法可实现: 方法1. 隐藏登录界面 Program.cs 中代码如下: /// <summary> /// 应用程序的主入口点. /// </summary> [STAThread] static void Main() { Application.EnableVisualStyles(); Application.

  • PHP实现简单用户登录界面

    用PHP实现简单的用户登录界面,供大家参考,具体内容如下 首先要实现用户登录界面需要一个html登录表单 <form action="connet.php" method="POST" > 用户名:<input type = "text" name = "username"/> <br /> 密码:<input type = "password" name=&quo

随机推荐