vscarpenter@gmail.com
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:
http://dl.dropbox.com/u/39023/Notes/iphone.html
I am also including the code here. I am hoping someone can spot what I am missing. Thanks in advance.
--Vinny
<html>
<head>
<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;
}
Ext.setup({
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()) {
loginForm.submit({
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
});
}
loginForm.show();
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);
}
}
});
</script>
</head>
<body></body>
</html>
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:
http://dl.dropbox.com/u/39023/Notes/iphone.html
I am also including the code here. I am hoping someone can spot what I am missing. Thanks in advance.
--Vinny
<html>
<head>
<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;
}
Ext.setup({
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()) {
loginForm.submit({
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
});
}
loginForm.show();
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);
}
}
});
</script>
</head>
<body></body>
</html>