ucan-ext-js-kitchen-sink/packages/local/common-ux/src/entity/detail/EntityDetailView.js

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

Ext.define('UCAN.common.entity.detail.EntityDetailView', {
  extend: 'Ext.Panel',
  xtype: 'entityDetailView',
  cls: 'ucan-entity-detail-view',

  config: {
    displayName: null,
    backAction: '',
    actions: [],
    cards: []
  },
  twoWayBindable: {
    displayName: true,
    backAction: true,
    actions: true,
    cards: true
  },
  publishes: ['displayName', 'backAction', 'actions', 'cards'],

  layout: 'vbox',
  scrollable: true,

  items: [
    {
      xtype: 'entityBasicHeader',
      headerContent: [
        {
          flex: 1
        },
        {
          flex:7,
          layout: 'hbox',
          items:[
            {
              layout: {
                type: 'hbox',
                align: 'center'
              },
              items: [
                {
                  xtype: 'button',
                  itemId: 'backButton',
                  iconCls: 'x-fa fa-chevron-left'
                },
                {
                  xtype: 'displayfield',
                  itemId: 'displayField',
                  userSelectable: 'text',
                  width: 'auto'
                },
                {
                  xtype: 'segmentedbutton',
                  itemId: 'buttonNavigation'
                },
              ]
            },
            {
              xtype: 'spacer'
            },
            {
              layout: {
                type: 'hbox',
                pack: 'end'
              },
              itemId: 'actionContainer'
            }
          ]
        }
      ]
    },
    {
      layout: 'card',
      itemId: 'cardContainer',
      flex: 8
    }
  ],

  switchCard: function(item) {
    let cardNavContainer = this.queryById("buttonNavigation");
    cardNavContainer.getItems().items[item].setPressed(true);
    let cardContainer = this.queryById("cardContainer");
    cardContainer.setActiveItem(item);
  },

  // region Update Attributes

  updateBackAction: function(config) {
    let backButton = this.queryById("backButton");
    backButton.setHandler(config);
  },

  updateDisplayName: function(config) {
    let displayField = this.queryById("displayField");
    displayField.setValue(config);
  },

  updateCards: function(config) {
    if (!Ext.isEmpty(config)) {
      let cardNavContainer = this.queryById("buttonNavigation");
      let cardContainer = this.queryById("cardContainer");
      cardContainer.setItems(config);
      let index = 0;
      config.forEach(item => {
        if (item.disabled === undefined) {
          item.disabled = false;
        }
        if (item.hidden === undefined) {
          item.hidden = false;
        }
        const button = Ext.create({
          xtype: 'button',
          cardIndex: index,
          handler: function() {
            cardContainer.setActiveItem(this.cardIndex);
            const detailView = this.up('entityDetailView');
            detailView.fireEvent('activeItemChange', detailView, this.cardIndex);
          },
          iconCls: item.cardIconCls,
          bind: {
            tooltip: item.cardToolTip,
            disabled: item.disabled,
            hidden: item.hidden || config.length  <= 1
          },
          cls: item.cls,
          userCls: 'ucan-detail-view-header-container-button-card',
          ui: 'subNavButton'
        });
        cardNavContainer.add(button);
        index++;
      });
      cardNavContainer.getItems().items[0].setPressed(true);
    }
  },

  updateActions: function(config) {
    if (!Ext.isEmpty(config)) {
      let actionContainer = this.queryById("actionContainer");
      config.forEach(btn => {
        if (btn.disabled === undefined) {
          btn.disabled = false;
        }
        if (btn.hidden === undefined) {
          btn.hidden = false;
        }
        if (btn.cls === undefined) {
          btn.cls = 'ucan-entity-detail-view-button-action';
        }
        actionContainer.add(Ext.create({
          xtype: 'button',
          handler: btn.handler,
          iconCls: btn.iconCls,
          bind: {
            text: btn.bind.text,
            disabled: btn.bind.disabled,
            hidden: btn.bind.hidden,
            cls: btn.bind.cls,
            tooltip: btn.bind.tooltip
          },
        }));
      });
    }
  }

  // endregion
});