PDA

View Full Version : iPhone, Sencha Touch and PhoneGap Layout issues.



adrianot
13 Apr 2011, 7:22 AM
Hello,
we're trying to use Sencha Touch 1.1 and PhoneGap 0.94 on both Android and iOS devices to build the mobile version of our apps, however we're having great issues on understanding many layout issues that differ platform by platform.

We need to have a login form to authenticate the user, and a main TabPanel that contains many pages inside.

This is our code:


Ext.namespace('app');

Ext.regApplication({
name : 'app',
launch : function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch : function() {
if (/*!device ||*/ !this.launched) {
return;
}

var myLoginPan = new Ext.form.FormPanel({
title : 'Login',
dockedItems : [{
dock : 'top',
title : 'MyLogin',
xtype : 'toolbar',
ui : 'light'
}],
items : [ {
xtype : 'textfield',
name : 'username',
label : 'user',
value : ''
}, {
xtype : 'passwordfield',
name : 'password',
label : 'password',
value : ''
}, {
xtype : 'button',
text : 'login',
width : 100,
handler : function() {
myMainView.setActiveItem(1);
}
}]
});

var myFirstView = new Ext.TabPanel({
id : 'MyMainView',
fullscreen : true,
dockedItems : null,
layout : 'card',
items : [ {
iconCls : 'team',
title : 'My Section 1',
html : 'Add here Section 1 panel object',
items : [ {
xtype : 'button',
width : 100,
text : 'back',
handler : function() {
myMainView.setActiveItem(0);
}
} ]
}, {
iconCls : 'time',
title : 'My Section 2',
html : 'Add here Section 2 panel object'
} ]
});

var myMainView = new Ext.Panel({
fullscreen : true,
layout : 'card',
flex : 1,
items : [ myLoginPan, myFirstView ]
});
}
});


Basically it appears that all runs fine on the PC WebKit browser (Chrome) and Android devices, while on the iOS ones we're having different issues.

1) On IPhone we get a layout where the login form is correctly displayed BUT the TabPanel height is limited to the height of the toolbar header.
2) On IPad 2.0 we're not able to run the app at all since it shows a white blank screen when running without the debugger attached.

What should we do in order to fix this problem?

Could you please help on all this?

iPhone iOS version is 4.0
iPAD iOS version is 4.3

Should we use iOS 4.2 ? Or is there something else to check?

Thanks.