Sencha Touch 2 and Ext.Direct API calling - Login Form - extjs

Question

So the main question is: Does any one know how I need to change my calling method to be compatible with Sencha Touch 2?
Description:
I have a large Extjs application with a C# backend. I already have a mobile site with pages, but none of them require submitted form data. The trouble came when trying to create a login page.
On the desktop, using extjs and Ext.direct, there are login forms and they work fine, but the same coding patterns don't seem to work with Sencha Touch 2.
Ext.define('PF.view.phone.login.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.phoneloginform',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img'],
autoheight: true,
initialize: function () {
this.build();
this.callParent();
Ext.apply(this, {
api: {
submit: LoginActionImpl.login
}
});
scope: this
},
config: {
title: 'Login',
items: [
{
xtype: 'label',
html: 'Client Login',
itemId: 'clientLoginLabel',
style: 'text-align: left; font-size: 1.1em',
margin: '10 0 20 0'
}, {
xtype: 'fieldset',
/*Temporary style*/
margin: '10 17% 10 17% ',
items: [
{
xtype: 'textfield',
itemId: 'loginUsername',
name: 'loginUsername',
label: 'Username',
required: true
}, {
xtype: 'passwordfield',
itemId: 'loginPassword',
name: 'loginPassword',
label: 'Password',
required: true
}, {
xtype: 'toolbar',
layout: {
pack: 'right'
},
ui: 'plain',
items: [{
xtype: 'button',
itemId: 'loginButton',
text: 'Login',
ui: 'confirm'
}, {
xtype: 'button',
itemId: 'clearButton',
text: 'Clear',
ui: 'decline'
}]
}
]
}
]
},
build: function () {
this.down('#clearButton').setHandler(this.clear);
this.down('#loginButton').setHandler(this.login);
},
clear: function (btn, evt) {
btn.up('phoneloginform').reset();
},
login: function (btn, evt) {
/* Need help here */
/* Below is what would normally be used in the rest of the application */
this.submit({
success: this.onLoginSuccess,
failure: function (form, action) {
this.onLoginFailure(action.result);
},
scope: this
});
},
onLoginSuccess: function (arguments) {
Ext.dispatch('login/success');
},
onLoginFailure: function (result) {
// Here we need to check the actual results to determine why the login failed.
//
// A return code of -2 indicates account locked - otherwise we just assume an invalid attempt.
//
if (result.returnCode == -2) {
this.getComponent("loginUsername").markInvalid(t('ptl_mbl_user_status_locked_password'));
this.getComponent("loginUsername").markInvalid(t('ptl_mbl_user_status_locked_password'));
}
else {
this.getComponent("loginUsername").markInvalid(t('wms_username_password_incorrect_error'));
this.getComponent("loginPassword").markInvalid(t('wms_username_password_incorrect_error'));
}
Ext.dispatch('login/fail', result.returnCode);
},
getUsername: function () {
if (this.username) {
this.username = this.getValues()['#loginUsername'];
}
},
getPassword: function () {
if (this.password) {
this.password = this.getValues()['#loginPassword'];
}
}
});
The method of the C# method is:
[DirectMethodForm]
public JObject login(HttpRequest request)
{
String username = request["loginUsername"];
String password = request["loginPassword"];
this.setDB(request["db"]);
int loginReturnCode = this.getUserDetailsService().login(username, password, this.getDB(), true);
JObject jsonObject;
if (loginReturnCode == 0)
{
jsonObject = new JObject(
new JProperty("loginUsername", username),
new JProperty("loginPassword", password),
new JProperty("db", this.getDB()),
new JProperty("success", true));
}
else
{
jsonObject = new JObject(
new JProperty("errors", new JArray(new[] { loginReturnCode.ToString() })),
new JProperty("returnCode", loginReturnCode),
new JProperty("failed", true));
}
return jsonObject;
}
and what I'm trying to reuse so that can't be changed.
Stepping through the code in the browser, the issue comes during the "urlAppend" method in the "sencha-touch-all.js" file where the "url" parameter is null, so the call never reaches the C# code.
urlAppend : function(url, string) {
if (!Ext.isEmpty(string)) {
return url + (url.indexOf('?') === -1 ? '?' : '&') + string;
}
return url;
},
However, I've never needed to set that variable before, in using Ext.direct. I don't have a separate web service, so actual web service calls are not available.
Thanks in advance.