slide new panel form form

[blessan]

Can some one please give me a example of how to slide in a new panel after a button is pressed.

I modified the snecha touch forms example to create a login form. I want a new panel to slide in after login button is pressed.
heres my code.



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');
//console.dir(form);
console.info(testsd.getEl().dom);
form.insert(testsd);
form.doLayout();
}
}
}
]
}
]
};

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";
}
});


I was trying to slide in the testsd panel. Bt nothing seems to work. The kitchen sink example is really helping.

[blessan]

Can some one please help. Ive been using Extjs for a while. I tried the normal add methods and all but nothin seems to work. I just want to slide into a new panel after the form is submitted.

[blessan]

Is there like a more easier example then the ones already available. Kitchen sink is kinda complex.

[blessan]

I was able to get it done finally. It worked perfectly in chrome browser but when I tested it in iphone. My web page is completely blank. Can some please help me.



Ext.setup({
icon: 'icon.png',
db:null,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var mainPanel=new Ext.Panel({
scroll: 'vertical',
layout:'card',
activeItem:0,
items:[{
xtype:'form',
id:'mainform',
fullscreen:false,
items:[{
xtype: 'fieldset',
instructions: 'Please enter the information above.',
fullscreen:false,
title: 'Login',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name : 'name',
label: 'Name'
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password'
},{
xtype:'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'Reset',
centered :true,
scope:this,
maxWidth:150,
handler: function(cmp) {
var form=Ext.getCmp('mainform');
form.reset();
},
scope:this
},{
text: 'Login',
ui: 'action',
centered :true,
scope:this,
maxWidth:150,
handler: function() {
var form=Ext.getCmp('mainform');
var name = form.getValues().name;
var password = form.getValues().password;
if((name == localStorage.name) && (password == localStorage.password)) {
localStorage.loginFlag = true;
var second=Ext.getCmp('secondpanel');
mainPanel.setCard(second, 'slide');
} else {
alert('Invalid User');
}

}
}]
}]
}]
},{
xtype:'panel',
layout:'card',
id:'secondpanel',
items:[{
xtype:'form',
fullscreen:false,
items:[{
xtype: 'fieldset',
fullscreen:false,
title: 'Details',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name : 'name',
label: 'Name',
value: localStorage.name
}, {
xtype: 'textfield',
name : 'password',
label: 'Password',
value: localStorage.password
},{
xtype:'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'Logout',
centered :true,
scope:this,
maxWidth:150,
handler: function(cmp) {
//console.log(cmp);
var form=Ext.getCmp('mainform');
console.log(mainPanel);
localStorage.loginFlag = false;
mainPanel.setCard(form, {type: 'slide', direction: 'right'});
},
scope:this
}]
}]
}]
}]
}]

});
if (Ext.platform.isPhone) {
mainPanel.fullscreen = true;
} else {
Ext.apply(mainPanel, {
floating: true,
modal: false,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 550,
autoWidth:true,
autoHeight:true
});
}
mainPanel.show();
localStorage.name = "blessan";
localStorage.password = "blessan123";

}

}
);