PDA

View Full Version : Form element performance on Android and iPhone



Jeff Blake
1 Feb 2011, 2:08 PM
My app works great via the browser or on the iOS simulator. However, once I start running it on my actual phone (Galaxy S Captivate) I run into performance issues and quirky behavior:

After focusing a text field form element, and then activating the next TabPanel item, the text field stays rendered along with the keyboard.

I'm using Ext.dispatch and the MVC framework

here is example of my form:

App.views.Login = Ext.extend(Ext.form.FormPanel, {

initComponent: function() {

var loginForm = {
html: "<div class='wglogo'></div>",
dockedItems:[{
xtype: 'toolbar',
title: 'Login',
ui: 'light'
},
{
xtype: 'toolbar',
id: 'loginBar',
ui: 'light',
dock: 'bottom',
items: [{
text: 'Sign Up',
ui: 'back',
handler: this.loadSignup,
scope: this
}, {
xtype: 'spacer'
}, {
xtype: 'spacer'
}, {
text: 'Forgot Password',
ui: 'forward',
handler: this.loadForgotPassword,
scope: this
}]


}

],

items: [{
xtype: 'fieldset',
id: 'loginFormSet',
title: '',
items: [
{
xtype: 'emailfield',
placeHolder: 'Email',
name: 'Username',
id: 'Username',
value: localStorage.email,
required: true,
}, {
xtype: 'passwordfield',
placeHolder: 'Password',
name: 'Password',
value: localStorage.password,
required: true
}, {
xtype: 'checkboxfield',
id: 'RememberMe',
name: 'RememberMe',
label: 'Save login?',
checked: true,
labelWidth: '40%'
},
{
xtype: 'button',
text: 'Login',
ui: 'confirm',
style: 'margin:2%;',
handler: this.login,
scope: this


}
]
}]
};
Ext.apply(this, loginForm);

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

},

login: function() {
if (Ext.getCmp('RememberMe').isChecked()){
localStorage.setItem("email", App.views.Login.getValues().Username);
localStorage.setItem("password", App.views.Login.getValues().Password);

} else {
localStorage.removeItem("email", App.views.Login.getValues().Username);
localStorage.removeItem("password", App.views.Login.getValues().Password);
}
Ext.Ajax.request({
url: '/session.ext_json',
method: 'post',
reader: {
type: 'json',
root: 'users',
record: 'user'

},
params: {email: App.views.Login.getValues().Username, password : App.views.Login.getValues().Password},
failure : function(result, request){

Ext.Msg.alert("Server error. Please try again.");
},
success: function(response, opts) {

data = Ext.decode(response.responseText);

// Real Success
if (data.success) {

sessionStorage.setItem("userid", data.id);

if (App.views.code) {
Ext.dispatch({
controller: App.controllers.home,
action : 'load_code',
code : App.views.code,
animation: {type:'pop', direction:'right'}
});
}
else {
Ext.dispatch({
controller: App.controllers.home,
action : 'doLogin',
animation: {type:'pop', direction:'right'}
});

}
} else {
// No user/pass match found
Ext.Msg.alert("Invalid Username or password");
}

}
});
},

loadSignup: function() {
Ext.dispatch({
controller: App.controllers.home,
action : 'loadSignup',
animation : {type:'slide', direction:'right'}
});
},
loadForgotPassword: function() {
Ext.dispatch({
controller: 'User',
action : 'register'
});
}

});