---

• Next »
• « Previous

ViewController:

The controller (Ext.app.Controller) in ExtJS 4.x is used to handle events from multiple components using CSS-like selectors to match components and respond to their events.

The ViewController (Ext.app.ViewController) has been introduced since Ext JS 5. ViewController is associated with a specific UI component and handles the events raised from that particular component only without using refs (as in Ext JS 4).

ViewController can be created in a separate JS file in the same folder where view is located. For example, StudentViewController for the StudentMaster view should be created under app -> view -> student folder.

The following example demonstrates StudentViewController that handles events from StudentMaster component.

Ext.define('SchoolApp.view.student.StudentViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.StudentViewController',

    init: function (view) {

    },

    onReadClick: function () {
        this.lookupReference('firstName').setValue('Steve');
        this.lookupReference('lastName').setValue('Jobs');

        Ext.Msg.alert('Status', 'Read button clicked.');
    },

    onSaveClick: function () {
        Ext.Msg.alert('Status', 'Save button clicked.');

    },

    onResetClick: function () {
        this.lookupReference('firstName').setValue('');
        this.lookupReference('lastName').setValue('');

        Ext.Msg.alert('Status', 'Reset button clicked.');
    },

    onExitClick: function () {
        Ext.Msg.alert('Status', 'Exit button clicked.');
        this.getView().destroy();
    }

});

The following is a StudentMaster component that uses above StudentViewController.

Ext.define('SchoolApp.view.student.StudentMaster', {
    extend: 'Ext.form.Panel',
    alias: 'widget.StudentMaster',
    
    config: {},
    requires: ['SchoolApp.view.student.StudentViewController'],
    title: 'Student Information',

    constructor: function (config) {
        return this.callParent(arguments);
    },

    controller: 'StudentViewController',

    initComponent: function () {

        Ext.apply(this, {

            resizable: false,
            collapsible: true,
            bodyPadding: '5',
            buttonAlign: 'center',
            border: false,
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            items: [{
                xtype: 'textfield',
                fieldLabel: 'First Name',
                reference: 'firstName'
            },
            {
                xtype: 'textfield',
                fieldLabel: 'Last Name',
                reference: 'lastName'
            }
            ],
            buttons: [{
                        text: 'Read', itemID: 'btnRead',
                        listeners: {
                            click: 'onReadClick'
                        }
                },
                {
                    text: 'Save', itemID: 'btnSave',
                    listeners: {
                        click: 'onSaveClick'
                    }
                },
                {
                    text: 'Reset',
                    listeners: {
                        click: 'onResetClick'
                    }
                },
                {
                    text: 'Exit',
                    listeners: {
                        click: 'onExitClick'
                    }
                }

            ]

        });

        this.callParent(arguments);
    }
});

In the above example of StudentMaster, StudentMaster includes controller config that points to ViewController. Here, StudentViewController will handle all the events raised from StudentMaster view. Also, listeners config is used to specify event name and handler function name which will be defined in StudentViewController class. For example, click event of Read button will be handled by onReadClick method defined in StudentViewController.

The reference config is applied with firstName and lastName textfields so that we can get the reference of firstName and lastName textfields in the StudentViewController to work on it.

Thus, it is easy to bind events and also get the reference of any UI component using reference config in ViewController.

Try it on https://fiddle.sencha.com/#fiddle/rrr.

---

---

• Next »
• « Previous