This is my first stab at a tutorial, so hopefully it works out! Thanks to crafter for his code examples in this thread: http://extjs.com/forum/showthread.php?t=26320

## Contents

[hide]

### Entry Point

Let's assume the entry point to your application is index.asp, and it is structured as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<script type="text/javascript" src="/igs/includes/ext/ext-all.js"></script>
<body></body>
</html>

Obviously, modify the paths to your EXT directory accordingly. See the source for Login.js below

Next comes login.js. This guy handles all the heavy lifting, and for me, has all the pieces I was missing coming from a more traditional way of thinking about user authentication. It creates the form, renders it to a popup window, presents the window to the user, sends the submission via ajax, and handles the success and failure response depending on whether your user entered successful credentials.

Here is the server processing for your login. I'm going to paste the following overly simplistic code to show the responses that go back, and ultimately determine which function in login.js fires (success or failure). However, this is where you would make the call to the database with the username/password variables, do your authentication, and then send either of these responses depending on whether or not what the user provided a valid set of credentials.

<%

response.write "{ success: true}"
else
response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}"
end if

%>

<?php
$loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : ""; if($loginUsername == "f"){
echo "{success: true}";
} else {
echo "{success: false, errors: { reason: 'Login failed. Try again.' }}";
}
?>

<cfsetting showdebugoutput="No">
<cfoutput>#result#</cfoutput>