ucan-ext-js-kitchen-sink/packages/local/detailView/src/detailViewHeaderContainer.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.detailView.src.detailViewHeaderContainer', {
  extend: 'Ext.container.Container',
  alias: 'widget.detailViewHeaderContainer',
  cls: 'ucan-detail-view-header-container',

  config: {
    displayName: null,
    backAction: '',
    actions: [],
    cardButtons: []
  },
  twoWayBindable: {
    displayName: true,
    backAction: true,
    actions: true,
    cardButtons: []
  },
  border: null,
  layout: 'hbox',
  items: [
    {
      cls: 'ucan-detail-view-header-container-container-column-first',
      flex: 1
    },
    {
      flex: 6,
      layout: {
        type: 'hbox'
      },
      items: [
        {
          cls: 'js-ucan-detail-view-header-container-navigation',
          layout: {
            type: 'hbox',
            align: 'start'
          },
          items: [
            {
              xtype: 'button',
              cls: 'js-ucan-detail-view-header-container-button-back',
              iconCls: 'x-fa fa-chevron-left'
            },
            {
              xtype: 'displayfield',
              cls: 'js-ucan-detail-view-header-container-toolbar-displayfield ucan-detail-view-header-container-toolbar-display-field',
              width: 'auto'
            },
            {
              xtype: 'segmentedbutton',
              cls: 'js-ucan-detail-view-header-container-segmentedbutton-navigation'
            }
          ]
        },
        {
          layout: {
            type: 'hbox'
          },
          cls: 'js-ucan-detail-view-header-container-action ucan-detail-view-header-container-action'
        }
      ]
    }
  ],

  updateBackAction: function(config) {
    this.down('[cls~=js-ucan-detail-view-header-container-button-back]').setHandler(config);
  },

  updateActions: function(config) {
    if (!Ext.isEmpty(config)) {
      const actionContainer = this.down('[cls~=js-ucan-detail-view-header-container-action]');
      actionContainer.add(config);
    }
  },

  updateCardButtons: function(config) {
    if (!Ext.isEmpty(config)) {
      const cardNavContainer = this.down('[cls~=js-ucan-detail-view-header-container-segmentedbutton-navigation]');
      cardNavContainer.add(config);
      cardNavContainer.setValue(Ext.isEmpty(config[0].value) ? 0 : config[0].value);
    }
  },

  updateDisplayName: function(config) {
    this.down('[cls~=js-ucan-detail-view-header-container-toolbar-displayfield]').setValue(config);
  }
});