Ir para conteúdo


Foto

Exemplo de Janela de Login + Alerta Caps Lock


  • Por favor, faça o login para responder
20 respostas neste tópico

#1 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 31 October 2007 - 07:30

Vou postar meu exemplo de login

Ta ai o codigo, dicas ou sujestões sao bem-vindas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<title>Login</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
	<meta name="language" content="pt-br" />
	<meta name="author" content="Fabyo" />
	<meta name="subject" content="fabyo.php@gmail.com" />	
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Pragma" content="no-cache" />
	<style type="text/css">
	.image_login  {
		padding-left:20px;
		background: url('images/default/lock.png') no-repeat 1px 0px;	
	}
	
	.x-window-dlg .ext-sistema-load {
		background:transparent url('images/default/search.gif') no-repeat top left;
		height:46px;
		width:50px;	
	}
	</style>
	<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
	<script type="text/javascript" src="js/ext-base.js"></script>
	<script type="text/javascript" src="js/ext-all.js"></script>
	<script type="text/javascript">	
	var System = function(){	
		var win;
		var trim = Ext.util.Format.trim;
		
		function Logar() {			
			formPanel = Ext.getCmp('my-form');			

			if(Ext.isEmpty(trim(Ext.get('nome').getValue()))){
				Ext.MessageBox.show({						
					title: 'Erro',
					msg: '<b>Digite um nome!</b>',
					buttons: Ext.MessageBox.OK,
					animEl: 'Botao',
					icon: Ext.MessageBox.ERROR,
					fn: function(){						
						Ext.getCmp('nome').setValue("");		
						Ext.getCmp('nome').focus();							
					}
				});
				return false;
			}
			
			if(Ext.isEmpty(trim(Ext.get('senha').getValue()))){
				Ext.MessageBox.show({						
					title: 'Erro',
					msg: '<b>Digite uma senha!</b>',
					buttons: Ext.MessageBox.OK,
					animEl: 'Botao',
					icon: Ext.MessageBox.ERROR,
					fn: function(){
						Ext.getCmp('senha').setValue("");		
						Ext.getCmp('senha').focus();							
					}
				});
				return false;
			}			
			
			if (formPanel.form.isValid()){ 
				formPanel.form.submit({ 
					reset: true, 
					success: function(windowForm, action) { 					
				        Ext.MessageBox.show({
				           msg: "&nbsp;<b>Carregando as configura&ccedil;&otilde;es</b>",
				           progressText: 'Acessando sistema...',
				           width:300,
				           wait:true,
				           waitConfig:{interval:200},
				           icon:'ext-sistema-load', 
				           animEl:'login-win'
				       });
				        setTimeout(function(){			            						
							Ext.MessageBox.hide();	
							location.reload();							
				        }, 1200);				
						win.hide();		
						Ext.state.Manager.set("dados", action.result.nivel);									
					},
					failure: function(formPanel, action) { 
						Ext.MessageBox.show({						
							title: 'Erro',
							msg: '<b>Usuario ou senha invalidos!</b>',
							buttons: Ext.MessageBox.OK,
							animEl: 'Botao',
							icon: Ext.MessageBox.ERROR
						});
					} 				
				});            
			}  		
		}
		
		function createWindow() {
			if(!(win instanceof Ext.Window)){
				win = new Ext.Window({
					title: 'Login',
					baseCls: 'x-window',	
					iconCls: 'image_login', 					
					width:185,
					height:118,
					plain: true,		
					layout: 'fit',
					plain: true,
					collapsible: false,
					resizable: false,		    
					closable: false,
					closeAction:'hide',						
					modal: true,
					border: false, 		    					
					keys: [{
						key: Ext.EventObject.ENTER,
						fn: function(){
							if(!(Ext.isEmpty(trim(Ext.get('nome').getValue()))) && !(Ext.isEmpty(trim(Ext.get('senha').getValue())))){
								Logar();	
							}	
						},
						scope: this
					}],
					items: new Ext.form.FormPanel({        
						id: 'my-form',
						method: 'POST',
						baseParams:{modulo:'login'},
						baseCls: 'x-fieldset',
				        labelWidth: 45,
				        labelAlign:'right',
				        url:'action.php?acao=logar',
						waitMsgTarget: false,
						onSubmit : function(e){
							e.stopEvent();
						},
				        defaultType: 'textfield',	
						layout: 'form',						
						defaults: {
							width: 100,
							minLength : 3,    
							maxLength : 10,
							allowBlank:false,
							selectOnFocus : true,
							minLengthText : "O campo deve ter no minimo de {0} caracteres",    
							maxLengthText : "O campo deve ter no m&aacute;ximo de {0} caracteres"			
						},
					
				        items: [{			
				            fieldLabel: "<b>Nome</b>",
							id:'nome',
				            name: 'nome',
							tabIndex:1,
							blankText: 'Digite um Nome',
						    validationEvent : "blur",			    							
							autoCreate: {tag: "input", type: "text", autocomplete: "on", maxLength: 10},
							fireKey : function(e){		
								if(e.getKey() == e.ENTER) {
									Ext.getCmp('senha').focus();  									
								}	
							}									
				        },{
				            fieldLabel: "<b>Senha</b>",
							id:'senha',
				            name: 'senha',            
							tabIndex:2,
							inputType:'password',
							blankText: 'Digite uma Senha'										    					
				        }],
						
						buttonAlign:'center',
						buttons: [{
							id:'Botao',
							text:'Entrar',			
							type: 'submit',
							disabled: false,
							minButtonWidth: 75,
							handler: Logar
						}]
					}),
					focus: function(){
						Ext.get('nome').focus();
					}						
				});
			}	
			win.show(this);
		}
		
		return {		
			init: function() {	
				Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
				Ext.QuickTips.init();	
				Ext.form.Field.prototype.msgTarget = 'side';
			   	
				var cp = new Ext.state.CookieProvider({
					path: "/Automotive/",
					expires: new Date(new Date().getTime()+(3600*24*30*12)),
					domain: "Automotive"
				});
				Ext.state.Manager.setProvider(cp);				
				
				//se não existir o cookie ele abre a janela de login
				if(Ext.isEmpty(Ext.state.Manager.get("dados"))){
					createWindow();
				} else {
					//contina o script...
				}	
			},
			
			Logar: function() {
   						
			}
		}
	}();
	Ext.EventManager.onDocumentReady(System.init, System);		
</script>	
</head>
<body>
</body>
</html>

Imagens que usei nesse exemplo estao em anexo

[anexo apagado pelo Administrador]

#2 ReapeR

ReapeR

    Member Avançado

  • Expert User
  • 854 posts
  • LocationBlumenau - SC

Postado 31 October 2007 - 08:55

Tem como postar uma imagem da tela ou ela funcionando?? :D

Thanks

#3 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 31 October 2007 - 09:33

http://galutti-autom...b.com.br/login/

Digita qualquer coisa que coloquei no server só pra teste, mas ta sem banco



#4 davidramires

davidramires

    Novato

  • Membros
  • PipPip
  • 21 posts
  • LocationSP

Postado 01 November 2007 - 14:58

ficou bem trabalho o script,
para mim está bem mais limpo que algumas coisas que eu vi na versão 1.1.1 do extjs..
gostei da janela..

ficou show Fabyo,  8)
: David Ramires ::

#5 Perfect Lion

Perfect Lion

    Member Avançado

  • Administrators
  • 492 posts
  • LocationBrasil/SBC

Postado 01 November 2007 - 15:38

Fico muito bom fabão ... logo logo começo a mostrar um aplicativo que estou desenvolvendo.. o pessoal vai gostar =)

eu aqui tbm ;)
Ajude a manter o fórum organizado.
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

Fazer um CMS num é mole não.. ainda mais sozinho XD Ajude-me :P


#6 thevans

thevans

    Novato

  • Membros
  • PipPip
  • 18 posts

Postado 09 November 2007 - 10:48

você poderia postar os arquivos php que você usou no action.

Consegui implementar a tela de login, mas não estou sabendo fazer ele fazer a autenticação e logar no sistema.

Obrigado.

#7 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 10 November 2007 - 09:47

É que eu estou usando Zend, e quando não uso Zend uso classes, dai para não te confundir muito vou te passar o action bem simples e limpo para voce ter uma ideia melhor

action.php:

<?php

$funcao = isset($_REQUEST["acao"]) ? $_REQUEST["acao"] : "";

if (function_exists($funcao)) {
	call_user_func($funcao);
}

function logar(){

	$nome   = isset($_POST["nome"]) ? $_POST["nome"] : "";
	$senha  = isset($_POST["senha"]) ? $_POST["senha"] : "";
	
	//conecta no banco
	//faz uma consulta sql passando o usuario e senha
	//pega o resultado e verifica se existe voce retorna true
	//senao retorna false
}

?>

esse action que criei é muito util porque assim é um jeito facil de voce executar funções PHP usando javascript, basta voce chamar a pagina action e passar o nome da função que voce quer usar, ele executa a função automaticamente por causa da call_user_func

qualquer duvida só perguntar;

#8 klaygomes

klaygomes

    Member Avançado

  • Membros
  • PipPipPip
  • 94 posts

Postado 12 November 2007 - 10:26

Fabyo, tudo bem?
Cara tá com um probleminha, tipo é besteira, mas eu notei e deu vontade de falar, tava testando aqui e acabei achando irritante hehe ;D
Tipo, depois que você digita usuário e senha se teclar enter ele mostra o icone de erro do quicktips e o windows dá um bip de erro.

Será que aconteceu só comigo?

#9 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 12 November 2007 - 10:34

Eu tbm ja vi e achei besteira tbm

mas tentei arrumar e nao consegui

eu suponho que seja o seguinte, quando da submit no form ele automaticamente limpa os campos e por outro lado a validação vai ver que o campo ta vazio e da um erro

acho que é por isso que aparece o quicktips

#10 klaygomes

klaygomes

    Member Avançado

  • Membros
  • PipPipPip
  • 94 posts

Postado 12 November 2007 - 10:58


Fiz um tempo atrás aqui um sisteminha de login parecido com o seu, lembro que na época tive alguns problemas com isso, para enviar os dados após pressionar enter,  estava usando o evento keypress (nem sabia para que servia a Ext.KeyMap e tenho um inglês terrível), sofri para caramba ainda mais porque tenho um chefe chato para caramba heheheh...
De qualquer forma, no seu caso dá para você corrigir usando Ext.QuickTips.disable(); no inicio da função do keymap.

#11 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 27 November 2007 - 12:26

Demorei pra responder porque tirei umas ferias e só agora pude voltar.

mas sobre aquele pequeno erro resolvi assim

no formulario:

reset: false,


#12 klaygomes

klaygomes

    Member Avançado

  • Membros
  • PipPipPip
  • 94 posts

Postado 27 November 2007 - 12:38

Pow Fabyo, massa, e sem gambi.
valeu ai pelo feedback (atrasado né hehe)



#13 Fabyo

Fabyo

    Member Avançado

  • Administrators
  • 678 posts
  • LocationSão Paulo

Postado 02 April 2008 - 08:36

Revisei o script de login por completo, eu deixei o script bem mais enxuto e estruturado

ext.ux.login.js
Ext.namespace("Ext.ux.Login");

Ext.SSL_SECURE_URL  = '../images/default/s.gif';
Ext.BLANK_IMAGE_URL = '../images/default/s.gif';

Ext.ux.Login = function(){
	var win,
		FormPanel,
		Win,
		indexUrl  = '/financeiro',
		submitUrl = 'index/login';
		
	function onSubmit(){	
		if(Ext.isEmpty(Ext.util.Format.trim(Ext.get('Login').getValue()))) {
			Ext.MessageBox.show({
				title: 'Erro',
				msg: '<b>Digite um nome</b>',
				buttons: Ext.MessageBox.OK,
				animEl: 'Botao',
				closable:false,
				icon: Ext.MessageBox.ERROR,
				fn: function(){
					Ext.getCmp('Login').setValue('');
					Ext.getCmp('Login').focus();
				}
			});
			return false;
		}
		
		if(Ext.isEmpty(Ext.util.Format.trim(Ext.get('Senha').getValue()))){
			Ext.MessageBox.show({
				title: 'Erro',
				msg: '<b>Digite uma senha</b>',
				buttons: Ext.MessageBox.OK,
				animEl: 'Botao',
				closable:false,
				icon: Ext.MessageBox.ERROR,
				fn: function(){
					Ext.getCmp('Senha').setValue('');
					Ext.getCmp('Senha').focus();
				}
			});
			return false;
		}		
			
		if (FormPanel.form.isValid()) {
			FormPanel.form.submit({
				waitTitle: 'Por favor aguarde',
				waitMsg: 'Validando usuario...',
				reset: false,
				success: Ext.ux.Login.Success,
				failure: Ext.ux.Login.Failure,
				scope: Ext.ux.Login
			});
		}	
	}
	
	return{
		Init:function(){
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'side';			
			
			var LogoPanel = new Ext.Panel({
				baseCls: 'x-plain',
				id: 'login-logo',
				region: 'center'
			});
			
			if(!(FormPanel instanceof Ext.form.FormPanel)){
				FormPanel = new Ext.form.FormPanel({
					labelWidth:45,
					region: 'south',
					method: 'POST',
					url: submitUrl,				
					baseCls: 'x-plain',
					bodyStyle: (Ext.isIE? 'padding-left: 3px;' : 'padding: 3px;'),
					baseParams: {module: 'Login'},
					onSubmit: Ext.emptyFn,	
					waitMsgTarget: false,
					defaults: {
						width: 100,
						allowBlank:false,
						selectOnFocus: true,
						blankText: 'Preencha o campo'
					},
					defaultType: 'textfield',
					frame: false,
					id: 'login-form',
					items: [{
						fieldLabel: '<b>Nome</b>',
						id: 'Login',
						name: 'Login',
						tabIndex:1,						
						fireKey : function(e){
							if(e.getKey() == e.ENTER){
								Ext.getCmp('Senha').focus();
							}
						}						
					},{
						fieldLabel: '<b>Senha</b>',
						inputType: 'password',
						id: 'Senha',
						name: 'Senha',
						tabIndex:2
					}],
					buttonAlign:'center',
					buttons: [{
						id:'Botao',
						text:'<b>Entrar</b>',
						type: 'submit',
						handler: onSubmit,
						scope: Ext.ux.Login
					}]					
				});
			}
			
			if(!(Win instanceof Ext.Window)){
				Win = new Ext.Window({
					title: 'Login',
					iconCls: 'image_login',
					width:190,
					height:(Ext.isIE? 127 : 120),					
					plain: true,
					collapsible: false,
					resizable: false,
					closable: false,
					modal: true,
					border: false,			
					keys: [{
						key: Ext.EventObject.ENTER,
						fn:  function(e){							
							if(Ext.isEmpty(Ext.util.Format.trim(Ext.get('Login').getValue()))){								
								return false;
							}								
							if(Ext.isEmpty(Ext.util.Format.trim(Ext.get('Senha').getValue()))){
								return false;
							}	
							onSubmit();
						},
						scope:this
					}],
					items: [LogoPanel, FormPanel],
					focus: function(){
						Ext.get('Login').focus();
					}					
			    });	
			}				
			Win.show();
		},
		
		Success: function(f,a){
			if(a && a.result){
				Ext.MessageBox.show({
				   msg: "&nbsp;<b>Carregando as configura&ccedil;&otilde;es</b>",
				   progressText: 'Acessando sistema...',
				   width:300,
				   wait:true,
				   waitConfig:{interval:1500}				   
			   });
				setTimeout(function(){
					Ext.MessageBox.hide();
					window.location = indexUrl;
				}, 1200);			
				Win.destroy(true);
			}
		},
		
		Failure: function(formPanel, action) {
			Ext.MessageBox.show({
				title: 'Erro',
				msg: '<b>'+ action.result.msg.text +'</b>',
				buttons: Ext.MessageBox.OK,
				animEl: 'Botao',
				closable:false,
				icon: Ext.MessageBox.ERROR,
				fn:function(){
					if( action.result.msg.code == '2' ){
						Ext.getCmp('Login').focus();
					} else if(action.result.msg.code == '3') {
						Ext.getCmp('Senha').focus();
					}	
				}
			});											
		}
	};
}();

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);
	}
}

Ext.onReady(Ext.ux.Login.Init, Ext.ux.Login, true);

só pra constar:

* Ja inicia com o focu no campo "Login"
* Aperta a tecla Enter no campo "Login" o focu vai para o campo "Senha"
* Aperta a tecla Enter ele valida e da o submit.
* Validações e mensagens de retorno de erros.

e pra quem quiser incrementar igual eu fiz, se a tecla "Caps Lock" tiver ligada o sistema avisa, para isso basta incluir esse script no HTML:

CapsLock.js
var CapsLock = {
	init: function() {
		var id = Ext.id();
		this.alertBox = Ext.DomHelper.append(document.body,{
			tag: 'div',
			style: 'width: 8em',
			children: [{
				tag: 'div',
				style: 'text-align: center; color: red;',
				html: 'Caps Lock está ligado!',
				id: id
			}]
		}, true);
		Ext.fly(id).boxWrap();
		this.alertBox.hide();
		var pwds = Ext.query("INPUT[type='password']");
		for(var i = 0; i < pwds.length; i++) {
			Ext.get(pwds[i].id).on(
				'keypress',
				this.keypress.createDelegate(this,pwds[i],true),
				this
			);
		}
	},
	keypress: function(e, el) {
		var charCode = e.getCharCode();
		if(
			(e.shiftKey && charCode >= 97 && charCode <= 122) ||
			(!e.shiftKey && charCode >= 65 && charCode <= 90)
		){
			this.showWarning(el);
		} else {
			this.hideWarning();
		}
	},
	showWarning: function(el) {
		var x = Ext.fly(el).getX();
		var width = Ext.fly(el).getWidth();
		var y = Ext.fly(el).getY();
		this.alertBox.setXY([x + width + 40,y]);
		this.alertBox.show();
	},
	hideWarning: function() {
		this.alertBox.hide();
	}
}
Ext.onReady(CapsLock.init, CapsLock, true);


#14 RICARDOPS34

RICARDOPS34

    Iniciante

  • Membros
  • Pip
  • 1 posts

Postado 30 July 2008 - 00:47

Teria como colocar os 2 pra donwload ou o codigo pra visualizar?

Vou postar meu exemplo de login que estou usando, nao vou postar a parte PHP, só a parte Extjs
mas depois se algeum tiver duvida ou quiser que eu poste a parte PHP eu posto

Ta ai o codigo,dicas ou sujestões sao bem-vindas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<title>Login</title>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
	<meta name="language" content="pt-br" />
	<meta name="author" content="Fabyo" />
	<meta name="subject" content="fabyo.php@gmail.com" />	
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Pragma" content="no-cache" />
	<style type="text/css">
	.image_login  {
		padding-left:20px;
		background: url('images/default/lock.png') no-repeat 1px 0px;	
	}
	
	.x-window-dlg .ext-sistema-load {
		background:transparent url('images/default/search.gif') no-repeat top left;
		height:46px;
		width:50px;	
	}
	</style>
	<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
	<script type="text/javascript" src="js/ext-base.js"></script>
	<script type="text/javascript" src="js/ext-all.js"></script>
	<script type="text/javascript">	
	var System = function(){	
		var win;
		var trim = Ext.util.Format.trim;
		
		function Logar() {			
			formPanel = Ext.getCmp('my-form');			

			if(Ext.isEmpty(trim(Ext.get('nome').getValue()))){
				Ext.MessageBox.show({						
					title: 'Erro',
					msg: '<b>Digite um nome!</b>',
					buttons: Ext.MessageBox.OK,
					animEl: 'Botao',
					icon: Ext.MessageBox.ERROR,
					fn: function(){						
						Ext.getCmp('nome').setValue("");		
						Ext.getCmp('nome').focus();							
					}
				});
				return false;
			}
			
			if(Ext.isEmpty(trim(Ext.get('senha').getValue()))){
				Ext.MessageBox.show({						
					title: 'Erro',
					msg: '<b>Digite uma senha!</b>',
					buttons: Ext.MessageBox.OK,
					animEl: 'Botao',
					icon: Ext.MessageBox.ERROR,
					fn: function(){
						Ext.getCmp('senha').setValue("");		
						Ext.getCmp('senha').focus();							
					}
				});
				return false;
			}			
			
			if (formPanel.form.isValid()){ 
				formPanel.form.submit({ 
					reset: true, 
					success: function(windowForm, action) { 					
				        Ext.MessageBox.show({
				           msg: "&nbsp;<b>Carregando as configura&ccedil;&otilde;es</b>",
				           progressText: 'Acessando sistema...',
				           width:300,
				           wait:true,
				           waitConfig:{interval:200},
				           icon:'ext-sistema-load', 
				           animEl:'login-win'
				       });
				        setTimeout(function(){			            						
							Ext.MessageBox.hide();	
							location.reload();							
				        }, 1200);				
						win.hide();		
						Ext.state.Manager.set("dados", action.result.nivel);									
					},
					failure: function(formPanel, action) { 
						Ext.MessageBox.show({						
							title: 'Erro',
							msg: '<b>Usuario ou senha invalidos!</b>',
							buttons: Ext.MessageBox.OK,
							animEl: 'Botao',
							icon: Ext.MessageBox.ERROR
						});
					} 				
				});            
			}  		
		}
		
		function createWindow() {
			if(!(win instanceof Ext.Window)){
				win = new Ext.Window({
					title: 'Login',
					baseCls: 'x-window',	
					iconCls: 'image_login', 					
					width:185,
					height:118,
					plain: true,		
					layout: 'fit',
					plain: true,
					collapsible: false,
					resizable: false,		    
					closable: false,
					closeAction:'hide',						
					modal: true,
					border: false, 		    					
					keys: [{
						key: Ext.EventObject.ENTER,
						fn: function(){
							if(!(Ext.isEmpty(trim(Ext.get('nome').getValue()))) && !(Ext.isEmpty(trim(Ext.get('senha').getValue())))){
								Logar();	
							}	
						},
						scope: this
					}],
					items: new Ext.form.FormPanel({        
						id: 'my-form',
						method: 'POST',
						baseParams:{modulo:'login'},
						baseCls: 'x-fieldset',
				        labelWidth: 45,
				        labelAlign:'right',
				        url:'action.php?acao=logar',
						waitMsgTarget: false,
						onSubmit : function(e){
							e.stopEvent();
						},
				        defaultType: 'textfield',	
						layout: 'form',						
						defaults: {
							width: 100,
							minLength : 3,    
							maxLength : 10,
							allowBlank:false,
							selectOnFocus : true,
							minLengthText : "O campo deve ter no minimo de {0} caracteres",    
							maxLengthText : "O campo deve ter no m&aacute;ximo de {0} caracteres"			
						},
					
				        items: [{			
				            fieldLabel: "<b>Nome</b>",
							id:'nome',
				            name: 'nome',
							tabIndex:1,
							blankText: 'Digite um Nome',
						    validationEvent : "blur",			    							
							autoCreate: {tag: "input", type: "text", autocomplete: "on", maxLength: 10},
							fireKey : function(e){		
								if(e.getKey() == e.ENTER) {
									Ext.getCmp('senha').focus();  									
								}	
							}									
				        },{
				            fieldLabel: "<b>Senha</b>",
							id:'senha',
				            name: 'senha',            
							tabIndex:2,
							inputType:'password',
							blankText: 'Digite uma Senha'										    					
				        }],
						
						buttonAlign:'center',
						buttons: [{
							id:'Botao',
							text:'Entrar',			
							type: 'submit',
							disabled: false,
							minButtonWidth: 75,
							handler: Logar
						}]
					}),
					focus: function(){
						Ext.get('nome').focus();
					}						
				});
			}	
			win.show(this);
		}
		
		return {		
			init: function() {	
				Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
				Ext.QuickTips.init();	
				Ext.form.Field.prototype.msgTarget = 'side';
			   	
				var cp = new Ext.state.CookieProvider({
					path: "/Automotive/",
					expires: new Date(new Date().getTime()+(3600*24*30*12)),
					domain: "Automotive"
				});
				Ext.state.Manager.setProvider(cp);				
				
				//se não existir o cookie ele abre a janela de login
				if(Ext.isEmpty(Ext.state.Manager.get("dados"))){
					createWindow();
				} else {
					//contina o script...
				}	
			},
			
			Logar: function() {
   						
			}
		}
	}();
	Ext.EventManager.onDocumentReady(System.init, System);		
</script>	
</head>
<body>
</body>
</html>

Imagens que usei nesse exemplo estao em anexo



#15 Igor.php

Igor.php

    Member Avançado

  • Membros
  • PipPipPip
  • 40 posts
  • LocationRio de Janeiro

Postado 27 September 2008 - 12:22

Sera q nao tem erro nao? pq so acusa se o capslock for desligado  e se vc ficar ligando e desligando ele nao acusa.. so acusa uma vez....
"As dificuldades só existem para serem vencidas e nos motrar a nossa verdadeira capacidade."

#16 Rodrigo, Kptão Nascimento

Rodrigo, Kptão Nascimento

    Member Avançado

  • Expert User
  • 2472 posts
  • LocationTres Coroas, RS

Postado 13 October 2008 - 16:15

só para constar como exemplo:

ini_set('include_path', ini_get('include_path').PATH_SEPARATOR.'/home/www/public/faccat/php/class/other');
ini_set('include_path', ini_get('include_path').PATH_SEPARATOR.'/home/www/public/faccat/php/class');
ini_set('include_path', ini_get('include_path').PATH_SEPARATOR.'/home/www/public/faccat/php/adodb5');

switch($_POST['action']){
case "ifLogin":
session_start();
if (isset($_SESSION["user"])){
echo '{success: true}';
}else{
echo '{success: false}';
};
break;
case "class":
require_once($_POST['className'].'.php');
$Class=null;
if (class_exists($_POST['className'])){
eval('$Class = new '.$_POST['className'].';');
if (method_exists($Class,$_POST['method'])){
eval('$Class->'.$_POST['method'].'();');
}else{
echo "{success: false, error:'Method not exist!'}";
}
}else{
echo "{success: false, error:'Class not exist!'}";
}
break;
}


pra quem trabalha com classes em php.
Uso para chamadas em ajax, passando por parametro a "action" q pode ser específica ou uma classe, se for classe, passo o nome da classe para ser carregada, note q o nome do arquivo php é o mesmo da classe, e o método a ser executado.

Ex:

Ext.Ajax.request({
url:'php/class/handle.php',
method:'POST',
params:{
action:'class',
className:'login',
method:'doLogin',
user:Ext.getCmp('usuario').getValue(),
passwd:Ext.getCmp('senha').getValue()
},
success:loginSuccess,
failure:loginFailure
});


pode ser util a alguem...

abraços
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

http://blog.rkn.com.br
http://twitter.com/blogrkn

Atualize seu navegador
http://imasters.uol....br/crossbrowser

#17 djhonyy

djhonyy

    Member Avançado

  • Membros
  • PipPipPip
  • 530 posts
  • LocationFlorianópolis

Postado 20 October 2008 - 13:55

Hola Fabyo blz?

Então cara... copiei teu script de capsLink pra um exemplo meu de login mas não funcionou como esperado, a Alertbox sempre fica por trás do window de login, tentei adicionar o z-index no estilo do alert e até mesmo arrisquei colocar um index menor no form mas mesmo assim não adiantou, tantou no FF quando no IE.

Fiz uma busca na net e achei um script parecido com o seu, apesar de lá o cara também ter adicionado o z-index e ter funcionado no meu não funfou. No seu caso funcionou corretamente?

testei no FF3, IE7 no VISTA.

fico no aguardo gente boa.
Johnathan Cardoso
Desenvolvedor WEB

twitter: @djhonyy

Ajude a manter o fórum organizado
Quando sua dúvida for sanada. Coloque [RESOLVIDO] junto ao título do tópico.

#18 azeredo

azeredo

    Member Avançado

  • Membros
  • PipPipPip
  • 83 posts

Postado 03 November 2008 - 12:02

opa.. estou testando esse script.. o segundo que o Fabyo colocou....

funcionou tudo ok aqui... minha única dúvida é quando tenho que retornar false no login....

echo '{failure:true}'

só que nessa parte aqui dá erro....
Failure: function(formPanel, action) {
			Ext.MessageBox.show({
				title: 'Erro',
				msg: '<b>'+ action.result.msg.text +'</b>',
				buttons: Ext.MessageBox.OK,
				animEl: 'Botao',
				closable:false,
				icon: Ext.MessageBox.ERROR,
				fn:function(){
					if( action.result.msg.code == '2' ){
						Ext.getCmp('Login').focus();
					} else if(action.result.msg.code == '3') {
						Ext.getCmp('Senha').focus();
					}	
				}
			});											
		}

Dis que result.msg.text não tem valor.... alguém poderia me dizer o que devo passar a mais além do failure:true?

Valeu!

#19 Perfect Lion

Perfect Lion

    Member Avançado

  • Administrators
  • 492 posts
  • LocationBrasil/SBC

Postado 03 November 2008 - 12:13

Bem vc tem que passar um array

{failure: true, msg: {text:'Nao foi possivel autenticar !!!', code: 2}

;) A mensagen e o code depende do erro que deu no servidor.. se foi erro de comunicacao com o banco de dados.. se foi o usuario que num esta correto se e a senha que tbm num esta dentro do conforme... em fim vc faz da maneira que vc achar melhor ;)

eu aqui tbm ;)
Ajude a manter o fórum organizado.
Sempre que um tópico for resolvido clique no botão MARCAR COMO RESOLVIDO localizado ao lado do botão RESPONDER.

Fazer um CMS num é mole não.. ainda mais sozinho XD Ajude-me :P


#20 azeredo

azeredo

    Member Avançado

  • Membros
  • PipPipPip
  • 83 posts

Postado 03 November 2008 - 12:23

Opa.. valeu Perfct Lion!

Funcionou certinho!




0 usuário(s) está(ão) lendo este tópico

0 membros, 0 visitantes, 0 membros anônimos