With a view to a controller

In this application, we have a "main" view, which acts as the application's viewport, and an associated controller, which deals with user interactions with this viewport and handles routing. Let's look at the UI portion first: view:

// app/view/main/Main.js Ext.define('Instrumatics.view.main.Main', { extend: 'Ext.tab.Panel', requires: [ 'Instrumatics.view.dashboard.Dashboard', 'Instrumatics.view.web.Web', 'Instrumatics.view.web.Sql', ], xtype: 'app-main', controller: 'main-main', header: { title: { text: 'Instrumatics', padding: 20 } }, tabPosition: 'left', tabRotation: 0, items: [ { xtype: 'dashboard', title: 'Dashboard', reference: 'dash' }, { xtype: 'web-logs', title: 'Web', reference: 'web' }, { xtype: 'sql-logs', ...

Get Ext JS Application Development Blueprints now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.