Extjs4.0: March 2012

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<base href="http://fbdevzone.com/logindlg/"><div style="background:#fff;border:1px solid #999;margin:-1px -1px 0;padding:0;"><div style="background:#ddd;border:1px solid #999;color:#000;font:13px arial,sans-serif;font-weight:normal;margin:12px;padding:8px;text-align:left">This is Google's cache of <a href="http://fbdevzone.com/logindlg/" style="text-decoration:underline;color:#00c">http://fbdevzone.com/logindlg/</a>. It is a snapshot of the page as it appeared on 20 Feb 2012 09:24:00 GMT. The <a href="http://fbdevzone.com/logindlg/" style="text-decoration:underline;color:#00c">current page</a> could have changed in the meantime. <a href="http://www.google.com/intl/en/help/features_list.html#cached" style="text-decoration:underline;color:#00c">Learn more</a><br><br><div style="float:right"><a href="http://webcache.googleusercontent.com/search?q=cache:http://fbdevzone.com/logindlg/&hl=en&strip=1" style="text-decoration:underline;color:#00c">Text-only version</a></div>
	<div> </div></div></div><div style="position:relative">
	<?xml version="1.0" encoding="UTF-8"?>
	<!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="en">
	<head>
	<title>Ext.us.albeva.LoginDialog</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

	<!-- Load ExtJS -->
	<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css"></link>
	<script type="text/javascript" src="js/ext-base.js"></script>
	<script type="text/javascript" src="js/ext-all.js"></script>

	<!-- Load LoginDialog -->
	<script type="text/javascript" src="js/LoginDialog.min.js"></script>
	<script type="text/javascript">
	function log_event (msg)
	{
	var el = Ext.get('event-log');
	el.dom.innerHTML += msg + '<br />';
	el.scroll('bottom', 99999999, true);

	}
	function makeTitle (dlg)
	{
	return "<span class='title'>" + dlg.title + " :</span>";
	}
	var listeners = {
	show : function (dlg)
	{
	log_event(makeTitle(dlg) + ' show')
	},

	cancel : function (dlg) {
	var r = confirm("You sure?");
	log_event(makeTitle(dlg) + ' cancel - ' + (r ? 'Yes' : 'No'));
	return r;
	},

	success : function (dlg) {
	log_event(makeTitle(dlg) + ' success');
	},

	failure : function (dlg, a, msg) {
	log_event(makeTitle(dlg) + ' failure ("'+ msg +'")');
	},

	submit : function (dlg, values)
	{
	log_event(makeTitle(dlg) + ' submit("' + values.username + '", "'+values.password+'")');
	}
	}

	// open the LoginDialog
	function openDlg (title, modal, target)
	{
	var loginDlg = new Ext.ux.albeva.LoginDialog({
	title : title,
	url : "login-ajax.php",
	basePath : "images/",
	cancelButton: 'Cancel',
	modal : modal,
	listeners : listeners
	});
	loginDlg.show(target);
	}

	Ext.onReady (function () {
	Ext.QuickTips.init();
	var ctr = 0;
	Ext.get('open-login').on('click', function () {
	openDlg ("Login " + (++ctr), false, 'open-login')
	});
	Ext.get('open-login-modal').on('click', function () {
	openDlg ("Login (modal) " + (++ctr), true, 'open-login')
	});
	Ext.get('event-log-clear').on('click', function () {
	Ext.get('event-log').dom.innerHTML = '';
	});
	});
	</script>
	<style type="text/css">
	h1 { font-size : 2em; padding : 4px; }
	p { font-size : 1em; line-height 1.2em; padding 4px;}
	#event-log {
	font-family : courier, monospace;
	border : 2px solid blue;
	width : 100%;
	height : 200px;
	background : black;
	color : white;
	overflow : auto;
	white-space : pre;
	}
	#event-log .title {
	color : yellow;
	font-weight : bold;
	}
	</style>
	</head>
	<body>
	<h1>Ext.ux.albeva.LoginDialog</h1>
	<p>Simple login dialog for ExtJS 2.x library</p>
	<p>Author : Albert Varaksin<br />
	Version : 1.0 Beta<br />
	Licence : <a href="http://www.opensource.org/licenses/lgpl-3.0.html">LGPLv3</a><br />
	Downlaod : <a href="LoginDialog_1_0beta.zip">here</a>
	</p>

	<hr />
	<p>Username : user<br />Password : 1234</p>
	<button id="open-login">Open</button>
	<button id="open-login-modal">Open modal</button>
	<div style="padding:15px">
	<div id="event-log"></div>
	<button id="event-log-clear">Clear</button>
	</div>
	</body>
	</html>

Extjs4.0

Pages

Friday, 9 March 2012

login dialog