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', title: 'SQL', reference: 'sql' }
]
});There are a few interesting bits in this code. We use the header config option to give...