学习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>
结果效果页面如图: