ext实现完整的登录代码

Ext.form.Field.prototype.msgTarget = 'side';

//定义表单
var simple = new Ext.FormPanel({
labelWidth: 75, 
baseCls: 'x-plain',
width: 150,
defaultType: 'textfield',//默认字段类型

//定义表单元素
items: [{
fieldLabel: '帐户',
name: 'name',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank:false,//不允许为空
blankText:'帐户不能为空'//错误提示内容
},{
inputType:'password',
fieldLabel: '密码',
//anchor:'95%',
name: 'pws',
allowBlank:false,
blankText:'密码不能为空'
}
],

buttons: [{
text: '登陆',
type: 'submit',
//定义表单提交事件
handler:function(){
if(simple.form.isValid()){//验证合法后使用加载进度条
Ext.MessageBox.show({
title: '请稍等',
msg: '正在加载...',
progressText: '',
width:300,
progress:true,
closable:false,
animEl: 'loding'
});
//控制进度速度
var f = function(v){
return function(){
var i = v/11;
Ext.MessageBox.updateProgress(i, '');
};
};

for(var i = 1; i < 13; i++){
setTimeout(f(i), i*150);
}

//提交到服务器操作
simple.form.doAction('submit',{
url:'check.asp',//文件路径
method:'post',//提交方法post或get
params:'',
//提交成功的回调函数
success:function(form,action){
if (action.result.msg=='ok') {
document.location='index.html';
} else {
Ext.Msg.alert('登陆错误',action.result.msg);
}
},
//提交失败的回调函数
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试!');
}
});

}
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表单
}]
}); 
//定义窗体
var win = new Ext.Window({
id:'win',
title:'用户登陆',
layout:'fit', //之前提到的布局方式fit,自适应布局 
width:300,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,//禁止最大化
closeAction:'close',
closable:false,//禁止关闭
collapsible:true,//可折叠
plain: true,
buttonAlign:'center',
items:simple//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体

(0)

相关推荐

  • ext实现完整的登录代码

    Ext.form.Field.prototype.msgTarget = 'side'; //定义表单 var simple = new Ext.FormPanel({ labelWidth: 75,  baseCls: 'x-plain', width: 150, defaultType: 'textfield',//默认字段类型 //定义表单元素 items: [{ fieldLabel: '帐户', name: 'name',//元素名称 //anchor:'95%',//也可用此定义自适

  • react-native 完整实现登录功能的示例代码

    react native实现登录功能,包括ui的封装.网络请求的封装.导航器的实现.点击事件. demo下载:react-native 完整实现登录功能 后台如果是springmvc实现的需要配置上如下代码 <!--加入multipart 的解析器,这个必须配置,一会在controller里抓取上传文件时要用.否则会报错.--> <bean id="multipartResolver" class="org.springframework.web.multi

  • java编程基础之模仿用户登录代码分享

    上一篇文章我们了解了Java背包问题求解实例代码,接下来我们看看Java中模仿用户登录的相关代码,下面是具体内容. 基于用户从控制台输入模拟的简陋用户登录验证Demo原理: 利用 Scanner 类中 nextLine() 提取用户从控制台输入的字符串信息 利用 String 类的 equals 方法进行用户输入验证 import java.util.Scanner; public class Login { public static void main(String[] args) { //

  • Codeigniter注册登录代码示例

    本示例Codeigniter注册登录代码源自一个codeigniter的项目,现分享下~ 由于使用了 Active Record 类,一般数据库操作只有两层,即是C和V controllers/login.php文件: 复制代码 代码如下: <?phpclass Login extends CI_Controller { private $pass = ''; public function __construct() {  parent::__construct ();  $this->lo

  • Android登录代码MVP架构详解

    登录代码MVP架构的具体实现,分享给大家. MainActivity.java public class MainActivity extends AppCompatActivity implements View.OnClickListener, Mvp.fff { private EditText mUsername; private EditText mPassword; private Button login; private ProgressDialog mProgressDialo

  • shiro多验证登录代码实例及问题解决

    这篇文章主要介绍了shiro多验证登录代码实例及问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 首先新建一个shiroConfig shiro的配置类,代码如下: @Configuration是标识这个类是一个配置文件,在启动时会加载这个类里面的内容,这个配置文件的位置的一定一定一定不能防止启动类外面的文件夹中,否则还会在启动类上加注解 @Bean是将这个类交给spring管理 @Configuration public clas

  • Java完整实现记事本代码

    进入今天的正题: 1.整体设计思路如下: (1)使用顶层容器JFrame. (2)设置功能菜单并通过BorderLayout进行边框布局管理. (3)设置相应按钮与文件编辑区. (4)进行相应事件处理. 2.各功能菜单设计思路: (1)打开功能: 用户点击打开后,可以选择文件中对应的txt或dat文件,用户确定选择后即可打开改文件并展示文件中的内容,并在程序正上方展示当前文件路径. (2)新建功能: 用户点击新建功能后,将展示一个空白的记事本,用户可进行相应编辑. (3)保存功能: 用户点击保存

  • Ext 表单布局实例代码

    复制代码 代码如下: Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了. Ext.form.Field.prototype.msgTarget = 'under'; //第二句的目的就是设置控件的错误信息显示位置,主要可选的位置有: var tdate = new Ext.form.DateField({ fieldLabel: '日期', emptyTex

  • ext 同步和异步示例代码

    同步调用的相关文档就少一些.一下是同步示例,即页面在加载时,或者这个js被调用到时,程序会一行一行的往下走,这在获取页面初始化需要数据或者样式等一些功能会用到. 示例代码: 复制代码 代码如下: //判断按钮权限的方法.true为无权限,false为有权限可以显示     function checkButton(buttonId){ //按钮的状态,ext对类型要求比较高,这里注意类型.变量的转换问题.         var state = new Boolean(true); //这里调用

  • 检测png图片是否完整的php代码

    复制代码 代码如下: <?php $filename = './D243375_0.png'; $filename = realpath($filename); if (!file_exists($filename)) { die("图片不存在~!"); } $size = getimagesize ($filename); $file_extension = strtolower(substr(strrchr($filename,"."),1)); if(&

随机推荐