ExtJS MVC form references

Question

I'm new to Sencha ExtJS. I've just started creating a MVC application. Currently I'm trying to create a login screen for that application, but I can't get reference to my login form from login controller. Here is my code:

app.js

Ext.application({
    name: 'Fleximanager',

    requires: [
    ],

    controllers: [
        'Login'
    ],

    autoCreateViewport: true,

    init: function() {
    }
});

Viewport.js

Ext.define('Fleximanager.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires:[
        'Fleximanager.view.login.Flexilogin'
    ],
    layout: 'fit',
    items: [{
        xtype:'flexilogin'
    }]
});

Flexilogin.js

Ext.define('Fleximanager.view.login.Flexilogin', {
    extend: 'Ext.panel.Panel',
    xtype: 'flexilogin',

    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },

    id: 'flexilogin',
    style: {background: '#8fc33a'},
    items: [{
        xtype:'panel',
        title: 'Login',
        frame: true,
        width: 350,
        height: 200,
        layout: 'fit',
        items: {
            layout: 'anchor',
            id: 'flexiloginform',
            bodyPadding: 15,

            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Username',
                name: 'username',
                allowBlank: false
            },{
                fieldLabel: 'Password',
                name: 'password',
                inputType: 'password',
                allowBlank: false
            }],
            buttons: [{
                text: 'Register',
                id: 'registerbtn',
                action: 'register'
            },{
                text: 'Login',
                id: 'loginbtn',
                formBind: true,
            }]
        }
    }]
});

and the controller's Login.js

Ext.define('Fleximanager.controller.Login', {
    extend: 'Ext.app.Controller',
    requires: [
        'Fleximanager.view.login.Flexilogin',
    ],
    refs:[{
        ref: 'loginbtn',
        selector: '#loginbtn'
    }],

    init: function(){
        this.control({
            'loginbtn': {
                'click': function(){
                    console.log('click');
                }
            }
        })
    }
});

The code is supposed to log 'click' to console after you click the login button, but it does nothing. Can anyone help me?

Thanks for any answer.

score 2 · Answer 1 · answered Oct 30 '13 at 14:01

Just give a name to your button like this,

{
      text: 'Login',
      id: 'loginbtn',
      formBind: true,
      name: 'login'
}

and now in controller, put this code:

this.control({
            'button[name="login"]': {
                click: function(){
                    console.log('click');
                }
            }
        })

This will serve your purpose.

score 2 · Accepted Answer · answered Oct 30 '13 at 14:11

The problem lies in how you are referencing the button.

refs:[{
    ref: 'loginbtn',
    selector: '#loginbtn'
}],

Is creating a reference getter method this.getLoginbtn to use in the controller, but it cannot be used in this.control

The string key in this.control is a identifier like defined in Ext.ComponentQuery.query. It searches for xtype/alias and itemId.

this.control({
    'flexilogin #loginbtn': {
     ^ xtype     ^ itemId

Note that you should use itemId instead of id because id must be unique on the page at any moment, itemId should be unique inside a component; change like this:

{
      text: 'Login',
      itemId: 'loginbtn',
      ^ replace id by itemId
      formBind: true,
      name: 'login'
}

ExtJS MVC form references

2 Answers2