PDA

View Full Version : Detail help creating a login form



souley hype
5 Jan 2011, 9:23 AM
I want a detail step on how to create a login form and after the form is submitted, log the user in and go to another page with card animation help please! :((

Thanks in advance

Here is my index.js file


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {

var form;

Ext.apply(Ext.data.validations,{
passwordMessage: 'Password Entered is wrong',
password: function(config, value) {
if(value == "secret"){
return true;
} else {
return false;
}
}
});

Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'password', type: 'password'},
{name: 'email', type: 'string'}
],
validations: [
{type: 'presence', name: 'name',message:"Enter Name"},
{type: 'presence', name: 'password', message : "Enter Password"},
{type: 'format', name: 'email', matcher: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message:"Wrong Email Format"},
{type : 'password', name:'password'}
]
});

var formBase = {
scroll: 'vertical',
url : 'http://localhost:8888/dasdakMobile/app//postUser.php',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com',
useClearIcon: true
}]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Load Model',
ui: 'round',
handler: function() {
formBase.user = Ext.ModelMgr.create({
'name' : 'Akura',
'password': 'secret',
'email' : 'saru@sencha.com'
}, 'User');

form.loadModel(formBase.user);
}
},
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Save',
ui: 'confirm',
handler: function() {
var model = Ext.ModelMgr.create(form.getValues(),'User');

var errors = model.validate(),message = "";
if(errors.isValid()){

if(formBase.user){
form.updateRecord(formBase.user, true);
}
form.submit({
waitMsg : {message:'Submitting', cls : 'demos-loading'}
});

} else {
Ext.each(errors.items,function(rec,i){
message += rec.message+"<br>";
});
Ext.Msg.alert("Validate", message, function(){});
return false;
}
}
}
]
}
]

if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 480
});
}

form = new Ext.form.FormPanel(formBase);
form.show();
}
});

nero00
13 Jan 2011, 11:40 PM
Is anyone willing to help? Please? I share similar interests with Souley. Mostly on how to load a completely different interface/panel and content after the form submits.

Or could someone be so kind as to explain how to display the bottom tabs demo from kitchen sink after the form is submitted? Maybe provide an example that loads the bottom tabs demo on the click of a button so that you won't have bother with the form, I'll figure the form out on my own... I hope!

nero00
14 Jan 2011, 12:23 AM
I've been looking into the .show() function and setActiveitem am I on the right track?

profunctional
14 Jan 2011, 3:44 AM
Here you go. http://mhelpdesk.com/simple-login-form-using-asp-net-mvc-and-sencha-touch/

nero00
14 Jan 2011, 1:27 PM
Thank you very much profunctional! That helped a lot!

nero00
14 Jan 2011, 3:18 PM
For anyone wondering, or if you are completely new to sencha touch like I am, here is the result I was going for:

EDIT: there is a post here that explains how to do validation
http://www.sencha.com/forum/showthread.php?112719-Best-practice-for-form-validation

Also, this video on sencha touch layouts helped as well
http://www.youtube.com/watch?v=yz9TPTWfRUk&feature=related



var mainPanel;

Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {


var doLogin = function()
{
mainPanel.setActiveItem(App, 'slide');

}


var loginForm = new Ext.form.FormPanel({
dockedItems:[{
xtype: 'toolbar',
title: 'Login Form',
ui: 'light'
}],
items: [{
xtype: 'fieldset',
id: 'loginFormSet',
title: '',
items: [
{
xtype: 'emailfield',
placeHolder: 'Username',
name: 'Username',
id: 'Username',
required: true,
}, {
xtype: 'passwordfield',
placeHolder: 'Password',
name: 'Password',
required: true
}, {
xtype: 'checkboxfield',
id: 'RememberMe',
name: 'RememberMe',
label: 'Save login?',
labelWidth: '40%'
},
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
style: 'margin:2%;',
handler: function() {
doLogin();
}
}
]
}]
});

var App = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'light',
layout: {
pack: 'center'
}
},
cardSwitchAnimation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical'
},
items: [{
title: 'About',
html: '<p>Docking tabs to the bottom will automatically change their style. The tabs below are ui="light", though the standard type is dark. Badges (like the 4 below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
iconCls: 'info',
cls: 'card card1'
},
{
title: 'Favorites',
html: 'Favorites Card',
iconCls: 'favorites',
cls: 'card card2',
badgeText: '4'
},
{
title: 'Downloads',
id: 'tab3',
html: 'Downloads Card',
badgeText: 'Text can go here too, but it will be cut off if it is too long.',
cls: 'card card3',
iconCls: 'download'
},
{
title: 'Settings',
html: 'Settings Card',
cls: 'card card4',
iconCls: 'settings'
},
{
title: 'User',
html: 'User Card',
cls: 'card card5',
iconCls: 'user'
}]
});

mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items: [loginForm, App]


})


}
});

salon software stephen
2 Feb 2011, 3:33 PM
Thanks for your post, that really helped.