Build Failure

DetailsView.js

Ext.define('Hab.view.tenants.items.details.DetailsView', {
  xtype: 'detailsview',
  cls: 'detailsview',
  controller: { type: 'detailsviewcontroller' },
  viewModel: { type: 'detailsviewmodel' },
  requires: [
    'Ext.grid.Grid'
  ],
  extend: 'Ext.panel.Panel',
  tbar: [
    { html: '0 tenants selected.', xtype: 'panel' },
    { xtype: 'spacer' },
    {
      xtype: 'segmentedbutton',
      items: [
        { text: 'All', pressed: true },
        { text: 'Active' },
        { text: 'Inactive' }
      ]
    },
    { xtype: 'spacer' },
    { text: 'Register Tenant', tooltip: 'Register a new tenant' },
    { text: 'Send Message', tooltip: 'Send the selected tenants a message' },
    { xtype: 'spacer' },
    { text: 'Delete', tooltip: 'Delete the selected tenant' }
  ],

  items: [{
    xtype: 'grid',
    rowLines: false,
    columnLines: false,
    layout: 'fit',
    fullscreen: true,
    store: {
      type: 'tenants'
    },
    bind: '{tenants}',
    plugins: {
      pagingtoolbar: true
    },
    columns: [
      {
        width: 45,
        xtype: 'checkcolumn',
        fieldLabel: 'checkbox_label',
        dataIndex: 'selected',
        listeners: {
          checkchange: 'onSelect'
        },
        sortable: false,
        menuDisabled: true,
        hideable: false,
      },
      {
        width: 70,
        text: 'Alerts',
        hideable: false,
        sortable: false,

        encodeHtml: false,
        cell: {
          tools: {
            alert: {
              iconCls: 'tenant-alert-status-icon x-fa5 fa5-bell',
              handler: 'onAlertClick'
            }
          }
        }
      },
      {
        text: 'Last Name',
        flex: 1,
        menuDisabled: true,
        dataIndex: 'last_name'
      }, {
        text: 'First Name',
        flex: 1,
        menuDisabled: true,
        dataIndex: 'first_name'
      }, {
        text: 'Assigned Unit',
        width: 110,
        menuDisabled: true,
        dataIndex: 'unit'
      }, {
        text: 'Email Address',
        width: 200,
        menuDisabled: true,
        dataIndex: 'email'
      }, {
        text: 'Phone Number',
        width: 150,
        menuDisabled: true,
        dataIndex: 'phone'
      }, {
        text: 'Status',
        width: 80,
        menuDisabled: true,
        dataIndex: 'status'
      }, {
        text: 'Location',
        width: 120,
        menuDisabled: true,
        dataIndex: 'location_name'
      }, {
        text: 'Changed on',
        width: 100,
        menuDisabled: true,
        dataIndex: 'last_updated'
      }, {
        text: 'Actions',
        sortable: false,
        menuDisabled: true,
        width: 100,
        cell: {
          tools: {
            edit: {
              iconCls: 'x-fa fa-pencil-square-o',
              handler: 'edit'
            },
            timing: {
              iconCls: 'x-fa fa-clock-o',
              handler: 'timing'
            },
            chart: {
              iconCls: 'x-fa fa-send',
              handler: 'send'
            }
          }
        }
      }
    ]
  }]
});

Tenants.js

Ext.define('Hab.view.tenants.TenantsView', {
  xtype: 'tenantsview',
  cls: 'tenantsview',
  controller: { type: 'tenantsviewcontroller' },
  viewModel: { type: 'tenantsviewmodel' },
  requires: [],
  extend: 'Ext.tab.Panel',
  activeItem: 1,

  defaults: {
    scrollable: true
  },

  items: [{
    title: 'Summary',
    html: 'Summary',
    layout: 'center', // if i remove this. the error changes to Unrecognized alias: plugin.pagingtoolbar
    cls: 'card'
  }, {
    title: 'Details',
    xtype: 'detailsview'
  }, {
    title: 'History',
    html: 'History',
    layout: 'center', // if i remove this. the error changes to Unrecognized alias: plugin.pagingtoolbar
    cls: 'card'
  }]
});