ucan-ext-js-kitchen-sink/packages/local/common-ux/src/entity/list/EntityTreeView.js

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

Ext.define('UCAN.common.entity.list.EntityTreeView', {
  extend: 'UCAN.common.entity.list.EntityListView',
  xtype: 'entityTreeView',
  cls: 'ucan-entity-list-view',

  config: {
    entityStore: null,
    selection: null,
    entityShowable: true,
    entityAddable: false,
    entityRemoveable: false,
    entityBaseRoute: '',
    entitiesBaseRoute: '',
    actions: [],
    quickFilters: [],
    columns: [],
    translator: null,
    entityAddAction: 'onAddEntity',
    entityRemoveAction: 'onRemoveEntity',
    gridCheckBox: false
  },

  twoWayBindable: {
    entityStore: null,
    selection: null,
    actions: true,
    columns: true
  },
  publishes: ['entityStore', 'selection', 'columns', 'actions', 'quickFilters'],

  layout: 'hbox',
  scrollable: true,
  filters: {},

  items: [
    {
      height: '100%',
      width: '100%',
      layout: 'vbox',
      items: [
        {
          xtype: 'entityBasicHeader',
          headerContent: [
            {
              xtype: 'searchfield',
              itemId: 'entity-grid-search-field',
              cls: 'ucan-entity-list-view-search-field',
              autoComplete: true,

              listeners: {
                keydown: function(cmp, event) {
                  const scope = this.up('entityListView');
                  scope.onFilterEntities(cmp, event);
                },
                clearicontap: function(cmp) {
                  const scope = this.up('entityListView');
                  scope.onClearSearchValue(cmp);
                }
              }
            },
            {
              xtype: 'button',
              itemId: 'entity-grid-filter-btn',
              cls: 'ucan-entity-list-view-filter-button',
              iconCls: 'x-fa fa-filter',
              handler: function() {
                const scope = this.up('entityListView');
                scope.onResetFilter();
              },
              disabled: true
            },
            // {
            //   xtype: 'button',
            //   cls: 'ucan-entity-list-view-sync-button',
            //   iconCls: 'x-fa fa-sync',
            //   handler: function() {
            //     const scope = this.up('entityListView');
            //     scope.onReloadStore();
            //   }
            // },
            {
              itemId: 'entity-grid-add-btn',
              xtype: 'button',
              cls: 'ucan-entity-list-view-add-button',
              //iconCls: 'x-fa fa-plus'
            },
            {
              itemId: 'entity-grid-remove-btn',
              xtype: 'button',
              cls: 'ucan-entity-list-view-remove-button',
              //iconCls: 'x-fa fa-trash',
              handler: function() {
                const scope = this.up('entityListView');
                scope.onRemoveEntity();
              },
              disabled: true
            },
            {
              xtype: 'button',
              iconCls: 'x-fa fa-bars',
              arrow: false,
              itemId: 'entity-action-container',
              menu: {
                shadow: false,
                items:[

                ]
              }
            },
            {
              xtype: 'spacer'
            },
            {
              xtype: 'segmentedbutton',
              allowDepress: true,
              itemId: 'grid-filter-container'
            }

          ]
        },
        {
          layout: 'vbox',
          xtype: 'container',
          itemId: 'entity-grid-container',
          cls: 'ucan-entity-list-view-grid-container',
          flex: 1,
          items: [
            {
              xtype: 'tree',
              itemId: 'entity-grid',
              flex: 1,

              selectable: {mode: 'single'},
              rowNumbers: false,
              sortable: false,

              // StateId cannot be empty because of internel extjs event registration
              stateId: 'DefaultGridStateId',
              stateful: true,

              plugins: {
                gridfilters: true
              },

              listeners: {
                childdoubletap: function(component, location) {
                  const scope = this.up('entityListView');
                  scope.onOpenEntity(component, location);
                },
                childtouchstart: function(component, listener) {
                  const scope = this.up('entityListView');
                  scope.onNewTabEntity(component, listener);
                },
                select: function(component) {
                  const scope = this.up('entityListView');
                  scope.onUpdateSelection(component);
                },
                deselect: function(component) {
                  const scope = this.up('entityListView');
                  scope.onUpdateSelection(component);
                }
              },
              rowNumbers: false
            }
          ]
        }
      ]
    }
  ]
});