Submit Login Form using Sencha Touch 2 Beta

[warkesm]

Hello Friends,

Could you please help me to create a Login Form using Sencha Touch 2 Beta
I have created UI following some tutorials (http://docs.sencha.com/touch/2-0/#!/...etting_started, http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel) but now can't access the form data or send it to the controller
It has to be done in MVC pattern (http://docs.sencha.com/touch/2-0/#!/guide/apps_intro) but I couldn't achieved that.
And index.html has included only

<link rel="stylesheet" href="resources/css/senchatouch/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="lib/senchatouch/sencha-touch.js"></script>
    <script type="text/javascript" src="lib/senchatouch/all-classes.js"></script>
    <script type="text/javascript" src="Test.js"></script>

---

/*

Ext.application({
    name: 'MyBulle',
    launch: function() {    
        Ext.create('Ext.form.Panel', {
               fullscreen: true,
               items: 
            [
                {
                    xtype: 'fieldset',
                    defaults: 
                    {
                        labelWidth: '35%'
                    },
                    instructions: '(Provide credentials to login)',
                    items: 
                    [
                        {
                            xtype: 'textfield',
                            id: 'username',
                            name : 'userName',
                            label: 'Username', 
                            value: 'user',
                            allowBlank:false                                                    
                        },
                        {
                            xtype: 'passwordfield',
                            id: 'password',
                            name : 'password',
                            label: 'Password',
                            value: 'sometext'                        
                        },
                        {
                            xtype: 'textfield',
                            id: 'serverurl',
                            name : 'server',
                            label: 'Server',
                            value: 'http://user.domain.com'
                        }
                    ]//END ITEMS                    
                },
                {
                    xtype: 'button',
                    text: 'Login',
                    width: '30%',
                    left: '100px',
                    ui: 'confirm',
                    handler: function(sender,event){
                        alert('Submitted Login Form');

                    }//END HANDLER
                }
            ]//END ITEMS FIELDSET
        });//END CREATE
    }//END LAUNCH
});//END APPLICATION[/QUOTE]
*/

OR
/*
[QUOTE]Ext.setup
({
    onReady: function()
    {
        Ext.Viewport.add
        ({
            xtype: 'formpanel',
            title: 'Login',            
            dockedItems: 
            [
                {
                    xtype: "toolbar",
                    dock: "top",                    
                    title: "MyBulle Login"
                }
            ],//END DOCKEDITEMS            
            items: 
            [
                {
                    xtype: 'fieldset',
                    defaults: 
                    {
                        labelWidth: '38%'
                    },
                    instructions: '(Provide credentials to login)',
                    items: 
                    [
                        {
                            xtype: 'textfield',
                            id: 'username',
                            name : 'userName',
                            label: 'Username', 
                            value: 'user',
                            allowBlank:false                                                    
                        },
                        {
                            xtype: 'passwordfield',
                            id: 'password',
                            name : 'password',
                            label: 'Password',
                            value: 'sometext'                        
                        },
                        {
                            xtype: 'textfield',
                            id: 'serverurl',
                            name : 'server',
                            label: 'Server',
                            value: 'http://user.domain.com'
                        }
                    ]//END ITEMS                    
                },
                {
                    xtype: 'button',
                    text: 'Login',
                    width: '30%',
                    left: '100px',
                    ui: 'confirm',
                    handler: function(sender,event){
                        alert('Submitted Login Form');

                    }
                }
            ],//END ITEM FIELDSET
            initComponent: function() {
                alert('login initComponent');                
            }
        });
    }//END ONREADY FUNCTION
});

*/

---

The form data needs to be provided as parameters to POST API

Ext.Ajax.request({
    url: 'http://192.168.0.75/project_folder/php/api.php?method=loginprofile', 
    //only method will be as GET parameter userName and password will be POST parameters
    actionMethods:'POST',
    params: {
        profile: 'mbosf',
        //password: '21bd12dc183f74320esdfe76f27b78eb39c8ad972a757' // working as pwd is encrypted
        password: sha1Hash('sometext') // not working
    },
    success: function(response, opts) {    
        alert(response.responseText);      
    },
    failure: function(response, opts) {
        alert('Login Failed');
    }
});

---

It would be a great help if you can give any clue or hint to proceed.

Thank You !
- Sachin Warke

[JRS]

Hello,

This video has an example of handling forms.
http://vimeo.com/33311074

I believe the video was created using PR1 version - so you need to do some modifications for B1. I got it to work in Beta 1. I believe most of the mods were to refs and configs.

Hope this helps - Good luck
JRS

[warkesm]

Thank You So Much !
This video teaches step by step implementation of MVC pattern in Sencha Touch.
As you mentioned there are some changes as xtype: 'image' is not working in carousel and on submitting LoginForm from view, it's not handled in controller but I'm not getting what are the replacements for these changes.
I'm using Sencha in Android, console.log is not writing log that's why debugging with alerts. We get an alert as 'called init of controller Main' when app starts but not showing next alert message on submitting login form.
Could you tell me where am I going wrong?

View JS

Ext.define('Sencha.view.Home',{
extend: 'Ext.Panel',
xtype: 'LoginForm',

config: {
title: 'Home',
iconCls: 'home',


items: [
{
xtype: 'fieldset',
defaults:
{
labelWidth: '32%'
},
instructions: '(Please provide all credentials to login)',
layout: {
type: 'vbox'
},
items:
[
{
xtype: "toolbar",
dock: "top",
title: "Login To Sencha"
},
{
xtype: 'textfield',
id: 'username',
name : 'userName',
label: 'Username',
value: 'user',
allowBlank:false
},
{
xtype: 'passwordfield',
id: 'password',
name : 'password',
label: 'Password',
value: 'sometext'
},
{
xtype: 'textfield',
id: 'serverurl',
name : 'server',
label: 'Server',
value: 'http://user.domain.com'
}
]//END ITEMS
},
{
xtype: 'button',
ui: 'confirm',
text: 'Login',
width: '30%',
left: '100px',
action: 'submitLogin'
}
]
}//END CONFIG
});

Controller JS

Ext.define('Sencha.controller.Main',{
extend: 'Ext.app.Controller',
views: ['Home'],

init: function(){
alert('called init of controller Main');

this.control({
'button[action=submitLogin]': {
top: 'submitLoginForm'
}
});
},
submitLoginForm: function() {
alert('Submitted Login Form');
}

});

Thank You !
- Sachin Warke

[warkesm]

Oops Sorry My Mistake
It was spell mistake in Main.js,

Thank You JRS
Thank You So Much

Ext.define('Sencha.controller.Main',{
extend: 'Ext.app.Controller',
views: ['Home'],

init: function(){
this.control({
'button[action=submitLogin]': {
tap: 'submitLoginForm'
}
});
},
submitLoginForm: function() {
alert('Submitted Login Form');
}

});

[JRS]

Warkesm,

Glad everything worked out. Thanks should go to Ed Spencer and the ST video folks.

Good luck
JRS