View Full Version : Touch app works on iPad - blank screen on iPhone. Help!

27 Apr 2011, 1:45 PM
Hi everyone. I am pulling out my hair and I am hoping someone can see what the issue is with my application. I am in the process of building a Touch application and the app displays and works correctly on the iPad, Chrome and Safari (desktop) but I just get a blank screen on the iPhone.

I've cleared the cache, enabled the developer console but I don't get any errors. To check out the application in action, visit the link below:


I am also including the code here. I am hoping someone can spot what I am missing. Thanks in advance.


<title>BCP Calltree</title>
<link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="scripts/sencha-touch.js"></script>
<script type="text/javascript">

function getQueryString() {
var result = {}, queryString = location.search.substring(1),
re = /([^&=]+)=([^&]*)/g, m;

while (m = re.exec(queryString)) {
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);

return result;

icon: 'images/logo.png',
tabletStartupScreen: 'images/splash.png',
phoneStartupScreen: 'images/splash.png',
glossOnIcon: false,
fullscreen: true,
autoRender: true,

onReady: function() {

Ext.regModel('LoginUser', {
fields: [
{name: 'username', type: 'string'},
{name: 'password', type: 'password'}
validations: [
{type: 'presence', name: 'username', message:"Enter Username"},
{type: 'presence', name: 'password', message : "Enter Password"}

var imageToolbar = new Ext.Toolbar({
dock: 'top',
title: 'Login Page'

var loginForm = new Ext.form.FormPanel({
scroll : 'vertical',
url : 'login.jsp',
standardSubmit : true,
items: [
xtype: 'fieldset',
title: 'Login Page',
instructions: 'Please login using your windows username & password.',
defaults: {
labelAlign: 'left',
labelWidth: '45%',
required: true
items: [
xtype: 'textfield',
name : 'username',
label: 'Username',
autoCapitalize: false,
useClearIcon: true
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
xtype: 'button',
text: 'Login',
ui: 'confirm',
style: 'margin:2%;',
handler: function() {

var instance = Ext.ModelMgr.create({
username: loginForm.getValues().username,
password: loginForm.getValues().password
}, 'LoginUser');

var errors = instance.validate();
if (errors.isValid()) {
waitMsg : {message:'Submitting', cls : 'demos-loading'}

} else {
Ext.Msg.alert("Error", "Username and password are required. Please try again!", Ext.emptyFn);
return false;

dockedItems: [imageToolbar]

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


var errorMessage = getQueryString()["error"];
if (errorMessage != null && errorMessage.length > 0) {
Ext.Msg.alert("Login Error", "Incorrect Username or Password. Please login again using your Windows login and password!", Ext.emptyFn);


28 Apr 2011, 1:07 AM
I'm not sure what autoRender:true does for you in your Ext.setup, if it does anything at all. You might want to remove it and replace it with fullscreen: true.

28 Apr 2011, 4:07 AM
Hi Realjax and thank you for your response. I was just trying anything I could think off to make the FormPanel appear and so I added the autorender property I think I saw in another example. I did have a fullscreen: true in the Ext.setup but that didn't seem to work.

What finally seemed to work was adding a fullscreen: true to the FormPanel directly. Go figure - I didn't realize that it wasn't being inherited from the setup. Thanks again for your help.


2 Jan 2012, 11:58 AM
If you're using the MVC framework with (Ext.application), then you have to add the fullscreen option on the 'Viewport' property:

name: 'Sencha',
viewport: { fullscreen: true },
launch: function() {