Screen Breakup in Iphone

[Faru]

Hi everyone,


I have build app for iphone and android using sencha touch 1.0.In iphone while rotating from landscape to potrait sometimes the screen gets break it look half of the screen only showing we cant see the top of the page.we have given min width and max width screen for landscape and potrait but its not taking.

Please any one help me on this...........

[gilles86]

Can you provide the code of this part or can you create a small example how you are using it?

[Faru]

Hi,

Thanks for the reply...

sample code which i am using for login panel when try to rotate from potrait to landscape or vice versa its breaking the screen in iphone.

Main.js:

ZZ.views.Main = Ext.extend(Ext.Panel, {
name: 'sampleapp',
layout: 'fit',
fullscreen: true,
cls: 'main-view',


moveRight: { direction: 'right', type: 'slide' },
moveLeft: { direction: 'left', type: 'slide' },
listeners : {
orientationchange: function() {
window.scrollTo(0,0);
}
},


initComponent: function() {
this.loginPanel = new ZZ.views.Login();
this.mainPanel = new Ext.TabPanel( {
animation: 'slide',
layout: 'fit',
items: [this.loginPanel],
listeners: {
cardswitch: {
scope: this,
fn: function(el, next, prev, idx) {
this.onChangeView(next);
}
}
}
});


this.mainPanel.tabBar.hide();


Ext.apply(this, {
items: [this.mainPanel]
});


ZZ.views.Main.superclass.initComponent.apply(this, arguments);


this.onChangeView(this.loginPanel);
},
Ext.reg('ZZMain', ZZ.views.Main);


login.js:


ZZ.views.Login = Ext.extend(Ext.Panel, {


layout: 'fit',


initComponent: function() {


this.form = new Ext.Panel( {
cls: 'login-panel',
scroll: 'vertical',
id: 'lgnpanel',
items: [ {
xtype: 'form',
width: '100%',
items: [ {


items: [ {
html: '<div id="zz-logo" ></div>'


}, {
xtype: 'textfield',
name: 'email',
id: 'emailid',
label: '<span><img src="/public/images/email.png">
<span>UserName</span></span> ',
labelWidth: '95',
cls: 'customField',
placeHolder: 'enter your username',
// useClearIcon: true

}, {
xtype: 'textfield',
name: 'password',
id: 'password',
label: '<span><img src="/public/images/key.png"> <span>Password</span</span> ',
labelWidth: '95',
placeHolder: 'enter your password',
inputType: 'password',
// useClearIcon: true

}]
},{
cls: 'login-btn',
xtype: 'button',
baseCls: 'label',
scope: this,


handler: function() {


var email = Ext.getCmp('emailid').getValue();
var password = Ext.getCmp('password').getValue();


var login = new MyLogin.Login( {


email: Ext.getCmp('emailid').getValue(),
password: Ext.getCmp('password').getValue()


});
var errors = login.validate();
var errorValid = errors.isValid();
if (errorValid == false) {
var message = "";
Ext.each(errors.items, function(rec, i) {
message += rec.message + "<br>";
});


Ext.Msg.add( { maxHeight: 400 });
Ext.Msg.doLayout();
Ext.Msg.alert("Validate", message, function() { });
return false;


} else {


var myAjax = new Ext.data.Connection( {


listeners: {
beforerequest: function() {
ZZ.app.loginPanel.setLoading(true);
},
requestcomplete: function() { }
}
});


myAjax.request( {
url: '/app/Settings/do_login',
method: 'POST',
params: {
login: email,
password: password
}


});
}
}


}]
}]
});



Ext.applyIf(this, {
dockedItems: [ {
dock: 'top',
xtype: 'toolbar',
height: 45,
title: 'login',
id: 'login-tbar-top',
cls: 'top-toolbar',
items: []
}, {
xtype: 'toolbar',
dock: 'bottom',
height: 67,
cls: 'bottom-toolbar',
id: 'login-tbar-bottom',
items: [ ]
}],
items: [this.form]
});


ZZ.views.Login.superclass.initComponent.apply(this, arguments);
},

init: function() { }
});


Ext.reg('loginPanel', ZZ.views.Login);