Ext学习1——登录页面

原创于 2014-12-04 11:26:16 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #jsp #js

ext 同时被 2 个专栏收录

3 篇文章

订阅专栏

2 篇文章

订阅专栏

学习Ext 组件使用，描绘一个登陆页面。

1. 首先在页面中心放置一个window 窗口，窗口不可拖动，不可放大缩小，不能关闭。

2. 在窗体内部放置一个 Form，form使用水平布局（ layout: { type:'vbox',align:'stretch' } ），使用flex 比例将Form水平分为 1.6:1

3. 在Form水平上方放置图片，使用的panel组件，使用html属性放置图片；在Form 下方使用垂直布局

（layout{ type: 'hbox', padding: '5', align: 'stretch'},），将Form水平下方利用flex属性分为1:1.5的左右两部分

4. 在左部分以水平布局，绘制一组两个单选框；在右部分以Form布局（ layout:"form"），绘制用户名，密码两个文本输入框，

并使用buttons属性绘制登录，重置两个按钮，使用handler属性，绑定按钮点击事件。

5. 使用组件 Ext.util.KeyMap ，为按钮增加键盘按键事件，即当点击回车键时，等同点击登录按钮，

属性 target：需要绑定的组件id，属性key：键盘按键，如回车键：Ext.event.Event.ENTER, 属性 fn:按键后执行的事件

代码:

<span style="font-size:14px;">var xmname = "/dynaReport";
Ext.onReady(function() {
	var loginForm = Ext.create("Ext.form.Panel",
		{
			/// lable标题对齐方式   top  上下对齐
			lableAlign:"top",                
			frame:true,
			monitorValid : true,// 把有formBind:true的按钮和验证绑定
			id : 'login',
			width:600,
			layout: {
	              type:'vbox',
	              align:'stretch'
            },
            defaults:{margin:'0 0 3 0'},
			items:[
			       { 
			    	 
			    	 html:"<img src="+xmname+"/common/images/01.jpg width='590'>",
			    	 flex:1.6
			       },{
			    	 flex:1,
			    	 frame:true,
			    	 layout: {
                         type: 'hbox',
                         padding: '5',
                         align: 'stretch'
                     },
                     defaults:{
                         margin: '0 5 0 0'
                     },
                     items:[{
                    	 frame:true,
                    	 flex:1,
                    	 layout:"form",
                    	 padding: '0',
				         defaults:{
			                         margin: '0 0 0 0'
			                     }, 
				         items:[
				                {
				                    xtype      : 'fieldcontainer',
				                    fieldLabel : '登录系统',
				                    defaultType: 'radiofield',
				                    defaults: {
				                        flex: 1
				                    },
				                    layout: 'vbox',
				                    labelWidth:50,
				                    items: [
				                        {
				                            boxLabel  : '报表1',
				                            name      : 'projects',
				                            inputValue: 'zg',
				                            labelPad:50,
				                            id        : 'radio1',
				                            checked:true
				                        },
				                        {
				                            boxLabel  : '报表2',
				                            name      : 'projects',
				                            inputValue: 'jm',
				                            id        : 'radio2'
				                        }
				                    ]
				                }
				                ]
                     },{
                    	 frame:true,
                    	 layout:"form",
                    	 padding: '5',
                    	 flex:1.5,
                    	 defaults:{
                    	 		margin: '0 5 0 0'
                     	 },
                     	 items:[
           			    	    {
           			    	    	xtype:"textfield",
           			    	    	name:"username",
           			    	    	fieldLabel:"账号",
           			    	    	id:"username",
           			    	    	//是否可以为空
           			    	    	allowBlank:false,
           			    	    	//为空时提示
           			    	    	blankText:"账号不能为空"
           			    	    } ,{
           			    	    	xtype:"textfield",
           			    	    	name:"userpwd",
           			    	    	id:"passwd",
           			    	    	fieldLabel:"密码",
           			    	    	allowBlank:false,
           			    	    	blankText:"密码不能为空",
           			    	    	inputType:"password"
           			    	    }],
           			    	  buttons:[{
      							text:"登录",
      							formBind:true,
      							type:"submit",
      							handler:formsubmit
      						},{
      							text : '取消',
      							handler : function() {
      								loginForm.form.reset();
      							}// 重置表单
      						}
      						]
                     }]
			       }]
		});
		
	 var win = Ext.create('Ext.window.Window', {
	        width: 600,
	        height: 400,
	        minHeight: 400,
	        minWidth: 600,
	        hidden: false,
	        maximizable: false,
	        closable:false,
	        resizable:false,
	        draggable:false,
	        title: '登陆窗口',
	        autoShow: true,
	        items: loginForm
	    });
	 
     Ext.create('Ext.util.KeyMap', {
         target: 'login',
         key: Ext.event.Event.ENTER,
         fn: function (key, ev) {
    	 	 formsubmit();
             ev.stopEvent();
             return false;
         }
     });
	 
	 function formsubmit(){   
			// 验证合法后使用加载进度条
			if(loginForm.form.isValid()){
			 tipToolShow();
		     var passwd = Ext.getCmp('passwd').getValue();
		     var hash = hex_md5(passwd);
		     Ext.getCmp('passwd').setValue(hash);
			// 提交到服务器操作
			loginForm.form.doAction('submit', {
						url : xmname+'/login/userLogin.json',// 文件路径
						method : 'post',// 提交方法post或get
						params : '',
						// 提交成功的回调函数
						success : function(form, action) {
							if (action.result.msg == 'ok') {
								  //this.getEl().dom.action = 'memberAction.do?action=1'; //连接到服务器的url地址
								  // this.getEl().dom.submit();
								 Ext.get('f1').dom.submit();
							} else {
								  Ext.MessageBox.alert('登陆失败',action.result.msg);
							}
						},
						// 提交失败的回调函数
						failure : function() {
							Ext.MessageBox.alert('错误', '服务器出现错误请稍后再试！');
						}
			});
		}
	};
	
	function tipToolShow(toolspeed){
		if(!toolspeed){
			toolspeed = 50;
		}
		Ext.MessageBox.show({
	       title: 'Please wait',
	       msg: 'Loading items...',
	       progressText: 'Initializing...',
	       width:300,
	       progress:true,
	       closable:false,
	       animateTarget: 'loading'
	   });
	   // this hideous block creates the bogus progress
	   var f = function(v){
	        return function(){
	        		
	                var i = v/80;
	                Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed ');
	       };
	   };
	   for(var i = 1; i < 81; i++){
	       setTimeout(f(i), i*toolspeed);
	   }
	}
	
	var firebugWarning = function () {
	    var cp = Ext.create('Ext.state.CookieProvider');
	    if (window.console && window.console.firebug && ! cp.get('hideFBWarning')){
	        var tpl = Ext.create('Ext.Template',
	            '<div id="fb" style="border: 1px solid #FF0000; background-color:#FFAAAA; display:none; padding:15px; color:#000000;"><b>Warning: </b> Firebug is known to cause performance issues with Ext JS. <a href="#" id="hideWarning">[ Hide ]</a></div>'
	        );
	        var newEl = tpl.insertFirst('all-demos');
	
	        Ext.fly('hideWarning').on('click', function() {
	            Ext.fly(newEl).slideOut('t',{remove:true});
	            cp.set('hideFBWarning', true);
	        });
	        Ext.fly(newEl).slideIn();
	    }
	};
	
	var hideMask = function () {
	    Ext.get('loading').remove();
	    Ext.fly('loading-mask').animate({
	        opacity:0,
	        remove:true,
	        callback: firebugWarning
	    });
	};
	
	Ext.defer(hideMask, 250);

});</span>

结果效果页面如图：