PDA

View Full Version : Problem submitting form using Sencha Touch MVC



ardnet
2 Jul 2011, 9:01 PM
Hi all, I've been struggling on how to make simple form submission using Sencha Touch MVC, but still no luck until now. Been following all tutorials and the videos, also no luck.

Here is my case, I have a simple login form below:



icorrect.views.Loginform = Ext.extend(Ext.form.FormPanel,{
dockedItems: [{
xtype: 'toolbar',
title: 'ICorrect'
}],
items: [{
xtype: 'textfield',
name : 'userid',
label: 'User ID',
required: true,
id: 'useridid'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: true,
id: 'passwordid'
},

{
xtype: 'togglefield',
label: 'Remember login',
name: 'rememberlogin',
id: "rememberid"
},

{
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
name: 'submit',
text: 'Submit',
scope: this,
handler: function(){
/*Ext.dispatch({
controller: 'accusations',
action : 'login',
// id: this.record.getId(),
});*/

}
},
{
name: 'iamnotamember',
text: 'I am not a member',
handler: function(){
icorrect.views.Viewport.setActiveItem(1);
}


}]

}],
initComponent: function() {

icorrect.views.Loginform.superclass.initComponent.apply(this, arguments);

}


});

Ext.reg('loginform', icorrect.views.Loginform);


And here's my controller:


Ext.regController("accusations",{

login: function(options){
//var id = parseInt(options.id);
//alert(options);
}



});


As you can see from loginform code above, I managed to tied it with controller.
But then what's the code in controller to get those 2 values from form fields and submitting it to some URL?

Thanks in advance.

Regards,
Ardi

ardnet
3 Jul 2011, 5:29 AM
OK, I actually managed to get the value from the form field, it was actually like this:
Ext.getCmp('useridid').getValue();

And I got that one from Ext Js forum:
http://www.sencha.com/forum/showthread.php?127479-How-to-get-form-field-value-in-onclick-event

But now, how to get the value inside the controller.
I've tried using the same code but doesn't work.

Any tiny bitsy help would be appreciate it so so much. :)
Thanks in advance.

Ardi

leelavathi
27 Sep 2011, 12:10 AM
Hi ardnet,
you are mentioning it as php code. I haven't tried it. I am using java script to do same thing and i can access form details inside controller. First of all in your login code(script) change your handler as
handler:function()
{ Ext.dispatch({
controller: '
accusations',
action : 'login',
data : this.getValues(),
record : this.getRecord()
});
},

and in controller code(accusations) you can access name and password by adding

store: App.stores.users,

login : function(params) {
var newName = params.data.
userid;
var newPass = params.data.
password;
if(newName == "india" && newPass == "1234")
App.views.viewport.reveal('usersSuccess');
else
Ext.Msg.alert('Invalid credentials', ' Please re-enter user name and password.!', Ext.emptyFn);
},


here userid and password are the variables used to access form details.
store: App.stores.users, is very important as this is the one which loads data from store.
and you need to create a store and model (scripts) seperately..

//===============================================================
and here is controller script which i have written for my application.
Ext.regController('Users', {
store: App.stores.users,


newForm: function() {
App.views.viewport.reveal('usersForm');
},
submit: function(params) {
var newName = params.data.
userid;
var newPass = params.data.
password;
if(newName == "tyfone" && newPass == "1234")
App.views.viewport.reveal('usersSuccess');
else
Ext.Msg.alert('Invalid credentials', ' Please re-enter user name and password.!', Ext.emptyFn);

},
});



this is the store file
App.stores.users = new Ext.data.Store({
model: 'User',
autoLoad: true
});

and finally model file
App.models.User = Ext.regModel('User', {
fields: [
{
name: '
userid',
type: 'string'
}, {
name: '
password',
type: 'string'
},
],


proxy: {
type: 'localstorage',
id: 'sencha-users'
}
});

Hope this helps you :) :)