CODEWITHSUNDEEP
extjs4extjs
Tass
Tass

Reputation: 1

Passing values from html form on ExtJs controller

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?

Upvotes: 0

Views: 2551

Answers (2)

Evan Trimboli
Evan Trimboli

Reputation: 30082

As other posters have said, it makes a whole lot more sense to use the Ext.form classes, however if you must do it that way:

this.fireEvent('loginUser', this, Ext.getDom('usn').value, Ext.getDom('pwd').value);

Upvotes: 0

Jom
Jom

Reputation: 1897

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

Upvotes: 1

Related Questions