View Full Version : LoginForm example that uses model validation

16 Sep 2011, 10:01 AM
Hi Guys,
the last days i spent some time playing around with my first Touch App.

I am experienced with Ext JS, so i thought i can easily use my knowledge but Touch is a little bit different, because a lot of Ext JS Functions are missing.

First my App needs to login so i looked around forums post, that does not fullfill my needs. So i implemented it the way i understood the intention of the Sencha Guys.

Maybe this code will be useful for someone, who also needs such a feature, because i did not find something similar (including input validation) inside the posts (always nice if someone is sharing his knowledge ;)).

What i get to learn is heavyli use Touch SourceCode to get an idea what happens and also have a look at Ext JS 4 docu, because there is more docu concerning models, assoc, etc.

Cheers Holger

Ext.ns('Uops');Uops.Login = Ext.extend(Ext.form.FormPanel, {
fullscreen: true,
url: '/login/process',
dockedItems: [{
xtype: 'toolbar',
dock : 'top',
title: 'Login'
initComponent: function() {
// use model to validate user input
Ext.regModel('Uops.model.Login', {
fields: [
{name: 'username', type: 'string'},
{name: 'password', type: 'string'}
validations: [
{type: 'presence', field: 'username'},
{type: 'length', field: 'username', min: 6},
{type: 'presence', field: 'password'},
{type: 'length', field: 'password', min: 6}
//{type: 'format', field: 'username', matcher: /([a-z]+)[0-9]{2,3}/}
// use proxy, if you prefer model saving, see Option 1
proxy: {
type: 'ajax',
url: '/login/process',
writer: {
root: 'data'
// create instance of model
this.model = Ext.ModelMgr.create({
username: 'username',
password: ''
}, 'Uops.model.Login');

this.items = [{
xtype: 'fieldset',
itemId: 'fieldSet',
title: '',
instructions: 'Fill mandatory fields',
defaults: {
//labelWidth: '35%'
items: [
xtype: 'textfield',
id: 'username',
name: 'username',
required: true,
useClearIcon: true,
placeHolder: 'User ID'
xtype: 'textfield',
inputType: 'password',
id: 'password',
name: 'password',
required: true,
useClearIcon: true,
placeHolder: 'Password'
}, {
layout: 'hbox',
items: [{
xtype: 'button',
text: '<?php echo $this->t("Login") ?>',
label: '',
handler: this.onLogin,
scope: this

Uops.Login.superclass.initComponent.apply(this, arguments);

// sync model with form
// if you do not need default values skip this, but in my solution
// the last login name is stored in cookies to easy login with pwd

}, // eo function initComponent

// overwrite field submit behavior to avoid default submit()
// this is because we need to attach success|failure handlers
// this handles enter events in edit fields the same way as Login Button
onFieldAction: function(field) {
if (this.submitOnAction) {
// original call
// this.submit()

onLogin: function(btn, ev) {
// sync login model with form
this.updateRecord(this.model, true);
// validate model
var errors = this.model.validate();
if (errors.isValid()) {
// 1. option use model write operation
success: this.onLoginSuccess,
failure: this.onLoginFailed

// 2. option use Ext.Ajax call to do operation
// see src code of FormPanel.submit

// 3. option use normal form submit (AJAX Operation)
// prefered, because this auto handles loadMask, etc
autoAbort: true,
waitMsg: 'Login...',
success: this.onLoginSuccess,
failure: this.onLoginFailed,
scope: this

} else {
var msg = '';
errors.each(function(item) {
msg += 'Feld ' + item.field + ' ' + item.message + '<br/>';
//msg += item.message + '<br/>';
// set fieldSet instructions to display error reason
return false;

onLoginSuccess: function(form, result) {
// my app will be completely reloaded
window.location = redirectTo;
// but you can also stay intouch and use controller->dispatch or setActiveView instead

onLoginFailed: function(form, result) {
var msg = '';
Ext.each(result.errors, function(error) {
msg += error.msg + '<br/>';