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.