PDA

View Full Version : Simple panel scroll from form.



blessan
16 Jul 2010, 2:44 AM
Hey I was playing around with the forms example in framework. I modified it a bit to create a login form. Im trying to get to the next panel when login is successful. But I just can figure how to. I wanted it kinda slide in the new panel



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('User', {
fields: [
{name: 'name', type: 'string'},
{name: 'password', type: 'password'},
{name: 'email', type: 'string'},
{name: 'url', type: 'string'},
{name: 'rank', type: 'string'},
{name: 'value', type: 'int'},
{name: 'enable', type: 'boolean'},
{name: 'cool', type: 'boolean'},
{name: 'secret', type: 'boolean'}
]
});

var testsd = {
scroll: 'vertical',
items: [
{
xtype: 'fieldset',
title: '2nd Page',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'test',
name : 'username',
label: 'Name'
}, {
xtype: 'tets',
name : 'password',
label: 'Password'
}]
}
]};

var formBase = {
scroll: 'vertical',
items: [
{
xtype: 'fieldset',
title: 'Test Login',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name : 'username',
label: 'Name'
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}]
}
],

dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'Reset',
handler: function() {
form.reset();
}
},
{
text: 'Login',
ui: 'action',
handler: function() {
console.log(form.getValues());
var username = form.getValues().username;
var password = form.getValues().password;
if((username == localStorage.username) && (password == localStorage.password)) {
alert('Valid User');
} else {
alert('Invalid User');
}
}
}
]
}
]
};

if (Ext.platform.isAndroidOS) {
formBase.items.unshift({
xtype: 'component',
styleHtmlContent: true,
html: '<span style="color: red">Forms on Android are currently under development. We are working hard to improve this in upcoming releases.</span>'
});
}

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

var form = new Ext.form.FormPanel(formBase);
form.show();
localStorage.username = "blessan";
localStorage.password = "blessan123";
}
});


This is my code. The form panel name 'testsd' is just the new panel I want to show after the login is successful. Can anyone help. I cant find a simple example. Its really hard to debug with firebug.