Passing values from html form on ExtJs controller

Question

I'm new on ExtJS and still learning how things are working there.. In my case I have an html page which I load through ajax in my index page and inside this html there is a form element. So far I have managed to set an event listener to the button of my form so when I'm clicking the button the event is working perfect. What I'm not sure is how to pass the form's field values from processing them in my controller.

here is the example code:

The form:

    <form id="loginform">
        <fieldset>
            <input type="text" id="usn" placeholder="User" /><br />
            <input type="password" id="pwd" placeholder="Password"/>
        </fieldset>
        <p><input type="button" id="lg" value="Enter" /></p>
    </form>

My View:

Ext.define('App.view.Login', {
extend: 'Ext.container.Container',
alias: 'widget.login',

renderTo: 'wrap',

initComponent: function() {


    this.items = [{ 
        loader: {
            autoLoad: true,
            url: "web/login.html",
            renderer: function(loader, response, active) {
                var res = response.responseText;
                loader.getTarget().update(res);
            }
        }    
    }];


    this.addEvents('loginUser');



    this.callParent(arguments);
},


afterRender: function() {
    this.mon(this.el, 'click', this.onUserClick, this, {
        delegate: '#lg'
    });

    this.callParent(arguments);
},


onUserClick: function(ev, t) {
    ev.stopEvent();

    var params = Ext.fly(t).getAttribute('value');

    this.fireEvent('loginUser', params, this, ev);
}

});

The cotroller:

Ext.define('App.controller.Login', {
extend: 'Ext.app.Controller',

views: [ 'Login' ], 

refs: [{
    selector: 'login',
    ref: 'login'
}],

init: function() {

    this.control({

        'login':{

            loginUser: this.onLoginAuth

        }
    });
},

onLoginAuth: function(params, component, event){





    Ext.widget('users');


    this.getLogin().destroy();

}

});

Does someone has any idea how can we implement it?

Why would you do it like that, and not use, say an Ext form? Thx — Neil McGuigan

Jom Jom · Accepted Answer · 2012-06-25T05:47:32

i think you are misunderstood extjs. mainly i am using extjs for browser compatibility. we are not writing html directly, extjs do it for us.

In html side, we just include extjs library and app.js

<html>
  <head>
<title>Account Manager</title>

<link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">

<script type="text/javascript" src="ext-4/ext-debug.js"></script>

<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

in app.js

Every Ext JS 4 application starts with an instance of Application class. The Application contains global settings for your application (such as the app's name), as well as maintains references to all of the models, views and controllers used by the app. An Application also contains a launch function, which is run automatically when everything is loaded.

check http://docs.sencha.com/ext-js/4-1/#/guide/application_architecture

Passing values from html form on ExtJs controller

2 Answers