PDA

View Full Version : sliding form



tomalex0
19 Jul 2010, 2:17 AM
Hi,

i have tried below code mentioned code to make work in ipad and iphone, for me in ipad the form is nto aligned for me and problem also occurs when orientation occurs?

In iphone the page is not loaded



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',
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 second=Ext.getCmp('secondpanel');
mainPanel.setCard(second, 'slide');
}
}]
}]
}]
},{
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'
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email'
},{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},{
xtype:'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'Logout',
centered :true,
scope:this,
maxWidth:150,
handler: function(cmp) {
var form=Ext.getCmp('mainform');
console.log(mainPanel);
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: 880,
autoWidth:true,
autoHeight:true
});
}
mainPanel.show();
}

}
);



I'm i missing something, in chrome its working fine.

It will be very helpful if someone look in to this

tomalex0
19 Jul 2010, 3:03 AM
that was a silly mistake form me ;)

var mainPanel=new Ext.Panel({
scroll: 'vertical',
layout:'card',
fullscreen:true,
activeItem:0
});

i have missed fullscreen from main panel. However page alignment on orientation change is still a problem

tomalex0
19 Jul 2010, 3:19 AM
oh i was testing the page with developer mode as on, when i offed it , everything works fine . Here is the working code




Ext.setup({
icon: 'icon.png',
db:null,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
database.Main.conn();
var mainPanel=new Ext.Panel({
scroll: 'vertical',
layout:'card',
activeItem:0,
items:[{
xtype:'form',
id:'mainform',
fullscreen:true,
items:[{
xtype: 'fieldset',
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 second=Ext.getCmp('secondpanel');
var form=Ext.getCmp('mainform');
alert(form.getValues());
// mainPanel.setCard(second, 'slide');
}
}]
}]
}]
},{
xtype:'panel',
layout:'card',
id:'secondpanel',
items:[{
xtype:'form',
fullscreen:false,
items:[{
xtype: 'fieldset',
fullscreen:false,
title: 'Profile Details',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name : 'name',
label: 'Name'
}, {
xtype: 'emailfield',
name : 'email',
label: 'Email'
},{
xtype: 'numberfield',
name : 'age',
label: 'Age'
},{
xtype:'toolbar',
dock: 'bottom',
items: [
{xtype: 'spacer'},
{
text: 'Logout',
centered :true,
scope:this,
maxWidth:150,
handler: function(cmp) {
var form=Ext.getCmp('mainform');
mainPanel.setCard(form, {type:'slide',direction:'right'});
},
scope:this
}]
}]
}]
}]
}]

});
if (Ext.platform.isPhone || Ext.platform.isTablet) {
Ext.apply(mainPanel, {
fullscreen:true
});
} else {
Ext.apply(mainPanel, {
floating: true,
modal: false,
centered: true,
hideOnMaskTap: false,
height: 300,
width: 450,
autoWidth:true,
autoHeight:true
});
}
mainPanel.show();
}

}
);