浏览 1370 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (5)
|
|
|---|---|
| 作者 | 正文 |
|
时间：2008-04-15
昨天用Ext做一系统的登录页面，要在FormPanel中显示效验码的图片，想能不能用Label控件实现，于是仿Label做了一个MyImg控件，代码如下：
Ext.form.Myimg = Ext.extend(Ext.BoxComponent, {
onRender : function(ct, position){
if(!this.el){
this.el = document.createElement('img');
this.el.src = this.src;
if(this.forId){
this.el.setAttribute('htmlFor', this.forId);
}
}
Ext.form.Label.superclass.onRender.call(this, ct, position);
}
});
使用时，把它当做一个Label并设好src的值就可以了。
var formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
baseParams: {
module: 'login'
},
defaults: {
width: 200
},
defaultType: 'textfield',
frame: false,
height: 100,
id: 'login-form',
items: [{
fieldLabel: '登录帐号',
name: 'user'
},{
fieldLabel: '登录密码',
inputType: 'password',
name: 'pass'
},{
fieldLabel:'效 验 码',
name:'imgCode',
itemCls:'sex-male', //向左边浮动,处理控件横排
clearCls:'allow-float'
},{
xtype:'myimg',//这里要显示效验码图片
src:'img.action',//图片的src
width:100,//设置图片大小
height:22,
itemCls:'sex-female', //向左浮动,处理控件横排
clearCls:'allow-float'
}],
labelWidth:120,
region: 'south',
url: submitUrl
});
[img][/img]
声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
|
| 返回顶楼 | |
|
时间：2008-04-15
给得东西不详细
|
| 返回顶楼 | |
|
时间：2008-04-16
太好了，我以前不会，现在好了。
|
| 返回顶楼 | |
|
时间：2008-04-21
按照你的代码运行后 好象 xtype:'myimg',//这里要显示效验码图片 这个xtype不认
报A[C.xtype || D] is not a constructor 不知道EXTJS是着么用这个xtype 去找到Ext.form.Myimg的 |
| 返回顶楼 | |
|
时间：2008-04-22
不好意思代码没有帖全:)
login.js
Ext.form.Myimg = Ext.extend(Ext.BoxComponent, {
onRender : function(ct, position){
if(!this.el){
this.el = document.createElement('img');
this.el.src = this.src;
if(this.forId){
this.el.setAttribute('htmlFor', this.forId);
}
}
Ext.form.Label.superclass.onRender.call(this, ct, position);
}
});
Ext.reg('myimg', Ext.form.Myimg);
Login = function(){
var win,
form,
submitUrl = 'login.action';
function onSubmit(){
form.submit({
waitMsg: '正在提交数据，请等待...',
reset: true,
success: Login.Success,
scope: Login
});
}
return{
Init:function(){
Ext.QuickTips.init();
var logoPanel = new Ext.Panel({
baseCls: 'x-plain',
id: 'login-logo',
region: 'center'
});
var formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
baseParams: {
module: 'login'
},
defaults: {
width: 200
},
defaultType: 'textfield',
frame: false,
height: 100,
id: 'login-form',
items: [{
fieldLabel: '登录帐号',
name: 'user'
},{
fieldLabel: '登录密码',
inputType: 'password',
name: 'pass'
},{
fieldLabel:'效 验 码',
name:'imgCode',
itemCls:'sex-male', //向左边浮动,处理控件横排
clearCls:'allow-float'
},{
xtype:'myimg',
src:'img.action',
width:100,
height:22,
itemCls:'sex-female', //向左浮动,处理控件横排
clearCls:'allow-float'
}],
labelWidth:120,
region: 'south',
url: submitUrl
});
win = new Ext.Window({
buttons: [{
handler: onSubmit,
scope: Login,
text: '登 录'
}],
buttonAlign: 'right',
closable: false,
draggable: false,
height: 250,
id: 'login-win',
keys: {
key: [13], // enter key
fn: onSubmit,
scope:this
},
layout: 'border',
minHeight: 290,
minWidth: 530,
plain: false,
resizable: false,
items: [
logoPanel,
formPanel
],
title: 'Login',
width: 530
});
form = formPanel.getForm();
formPanel.on('render', function(){
var f = form.findField('user');
if(f){
f.focus();
}
}, this, {delay: 200});
win.show();
},
Success: function(f,a){
if(a && a.result){
win.destroy(true);
// get the path
var path = window.location.pathname,
path = path.substring(0, path.lastIndexOf('/') + 1);
// set the cookie
set_cookie('sessionId', a.result.sessionId, '', path, '', '' );
set_cookie('memberName', a.result.name, '', path, '', '' );
set_cookie('memberGroup', a.result.group, '', path, '', '' );
// redirect the window
window.location = a.result.path;
}
}
};
}();
//Form提交完成后
Ext.BasicForm.prototype.afterAction=function(action, success){
this.activeAction = null;
var o = action.options;
if(o.waitMsg){
Ext.MessageBox.updateProgress(1);
Ext.MessageBox.hide();
}
if(success){
if(o.reset){
this.reset();
}
Ext.callback(o.success, o.scope, [this, action]);
this.fireEvent('actioncompleted', this, action);
}else{
Ext.callback(o.failure, o.scope, [this, action]);
this.fireEvent('actionfailed', this, action);
}
}
login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>系统登录</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="javaScript/extjs/ext-base.js"></script>
<script type="text/javascript" src="javaScript/extjs/ext-all.js"></script>
<script type="text/javascript" src="javaScript/extjs/ext-lang-zh_CN.js"></script>
<!-- LOGIN -->
<script type="text/javascript" src="system/login/cookies.js"></script>
<link rel="stylesheet" type="text/css" href="css/desktop.css" />
<link rel="stylesheet" type="text/css" href="system/login/login.css" />
<script type="text/javascript" src="system/login/login.js"></script>
</head>
<style type="text/css" media="all">
.allow-float {clear:none!important;} /* 允许该元素浮动 */
.stop-float {clear:both!important;} /* 阻止该元素浮动 */
.sex-male {float:left;}
.sex-female {float:left;padding:0 0 0 20px;}
.age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}
</style>
<body>
<div id='loginDialogId'></div>
</body>
</html>
|
| 返回顶楼 | |
|
时间：2008-04-25
{
xtype:'panel', html:'<img src="xxxx.gif"/>' } 这样更简单些。 |
| 返回顶楼 | |
|
时间：2008-04-28
把图片放到一个DIV里面，然后用就可以了，比如：
{ xtype:'panel', height:0, el:Ext.get("img") } |
| 返回顶楼 | |
|
时间：2008-05-05
请教你的登录框上面的qwiki office这个图片是如何添加的啊
|
| 返回顶楼 | |
