We've already built part of this screen already. We can reuse Instrumatics.ux.chart.HistoricalRequestChart we created earlier to display the trend for a specified date range. As this data's coming from the store, we can simply filter the store and don't have to do anything on the component itself. With this in mind, the Web view looks like this:
// app/view/web/Web.js
Ext.define('Instrumatics.view.web.Web',{
extend: 'Ext.panel.Panel',
xtype: 'web-logs',
viewModel: {
type: 'web-web'
},
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
header: {
title: 'Web Requests',
items: [
{ xtype: 'datefield', fieldLabel: 'From', labelAlign: 'right', bind: '{currentStartDate}' },
{ xtype: 'datefield', fieldLabel: 'To', labelAlign: 'right', bind: '{currentEndDate}', labelWidth: 30 },
{ xtype: 'button', text: 'Refresh'...