Ext学习1——登录页面

                     学习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或getparams : '',// 提交成功的回调函数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>

 

 

 

 

结果效果页面如图：