ucan-ext-js-kitchen-sink/packages/local/explorerView/src/ExplorerView.js

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

Ext.define('UCAN.explorerView.src.ExplorerView', {
  extend: 'Ext.Panel',
  xtype: 'explorerView',
  reference: 'explorerView',
  cls: 'js-ucan-explorer-view ucan-explorer-view',

  config: {
    actions: [],
    filterViews: [],
    treeStore: null,
    treeSelection: null,
    rootName: '',
    gridStore: null,
    gridSelection: null,
    gridColumns: [],
    routePrefix: '',
    routeSuffix: ''
  },
  publishes: [
    'gridStore',
    'gridSelection',
    'gridColumns',
    'routePrefix',
    'routeSuffix'
  ],
  twoWayBindable: ['gridSelection'],
  layout: 'hbox',
  filters: {},

  items: [{
    height: '100%',
    width: '100%',
    layout: 'vbox',
    items: [
      {
        xtype: 'explorerViewHeaderContainer',
        headerContent: [
          {
            xtype: 'searchfield',
            cls: 'js-ucan-explorer-view-search-field ucan-explorer-view-search-field',
            autoComplete: true,

            listeners: {
              keydown: function(cmp, event) {
                const scope = this.up('[cls~=js-ucan-explorer-view]');
                scope.onFilterEntities(cmp, event);
              },
              clearicontap: function(cmp) {
                const scope = this.up('[cls~=js-ucan-explorer-view]');
                scope.onClearSearchValue(cmp);
              }
            }
          },
          {
            xtype: 'button',
            cls: 'js-ucan-explorer-view-filter-button ucan-explorer-view-filter-button',
            iconCls: 'x-fa fa-filter',
            handler: function() {
              const scope = this.up('[cls~=js-ucan-explorer-view]');
              scope.onResetFilter();
            },
            hidden: true
          },
          {
            xtype: 'button',
            cls: 'js-ucan-explorer-view-sync-button ucan-explorer-view-sync-button',
            iconCls: 'x-fa fa-sync',
            handler: function() {
              const scope = this.up('[cls~=js-ucan-explorer-view]');
              scope.onReloadStore();
            }
          },
          {
            xtype: 'button',
            text: '|',
            disabled: true
          },
          {
            layout: 'hbox',
            cls: 'js-ucan-explorer-view-header-container-filter-view-container'
          },
          {
            xtype: 'spacer'
          },
          {
            layout: {
              type: 'hbox',
              pack: 'end'
            },
            cls: 'js-ucan-explorer-view-header-container-action-container'
          }
        ]
      },
      {
        layout: 'hbox',
        height: '95%',
        items: [
          {
            flex: 1,
            xtype: 'explorerTreeView'
          },
          {
            flex: 3,
            xtype: 'explorerGridView',
            bind: {
              store: '{explorerView.gridStore}',
              selection: '{explorerView.gridSelection}',
              columns: '{explorerView.gridColumns}',
              routePrefix: '{explorerView.routePrefix}',
              routeSuffix: '{explorerView.routeSuffix}'
            }
          }
        ]
      }
    ]
  }],

  // region Update

  updateTreeStore: function(config) {
    this.down('[cls~=js-ucan-explorer-tree-view]').setStore(config);
  },

  updateTreeSelection: function(config) {
    this.down('[cls~=js-ucan-explorer-tree-view]').setTreeSelection(config);
    this.treeSelectionEnabled(Ext.isEmpty(config));
  },

  updateRootName: function(config) {
    this.down('[cls~=js-ucan-explorer-tree-view]').setRootName(config);
  },

  updateActions: function(config) {
    if (!Ext.isEmpty(config)) {
      let actionContainer = this.down('[cls~=js-ucan-explorer-view-header-container-action-container]');
      config.forEach(btn => {
        this.extractBindConfig('cls', btn, 'ucan-explorer-view-button-action');
        this.extractBindConfig('disabled', btn, false);
        this.extractBindConfig('hidden', btn, false);
        this.extractBindConfig('text', btn, '');
        this.extractBindConfig('tooltip', btn, '');
        actionContainer.add(Ext.create({
          xtype: 'button',
          handler: btn.handler,
          iconCls: btn.iconCls,
          menu: btn.menu,
          bind: {
            text: btn.bind.text,
            disabled: btn.bind.disabled,
            hidden: btn.bind.hidden,
            cls: btn.bind.cls,
            tooltip: btn.tooltip
          }
        }));
      });
    }
  },

  updateFilterViews: function(config) {
    if (!Ext.isEmpty(config)) {
      let filterContainer = this.down('[cls~=js-ucan-explorer-view-header-container-filter-view-container]');
      config.forEach(btn => {
        this.extractBindConfig('disabled', btn, false);
        this.extractBindConfig('tooltip', btn, '');
        filterContainer.add(Ext.create({
          xtype: 'button',
          handler: btn.handler,
          iconCls: btn.iconCls,
          menu: btn.menu,
          bind: {
            disabled: btn.bind.disabled,
            tooltip: btn.bind.tooltip
          }
        }));
      });
    }
  },

  // endregion Update

  // region Util

  extractBindConfig: function(conf, btn, dflt) {
    if (Ext.isEmpty(btn.bind[conf])) {
      if (!Ext.isEmpty(btn[conf])) {
        btn.bind[conf] = btn[conf];
      } else {
        btn.bind[conf] = dflt;
      }
    }
  },

  treeSelectionEnabled: function(disabled) {
    this.down('[cls~=js-ucan-explorer-view-search-field]').setDisabled(disabled);
    this.down('[cls~=js-ucan-explorer-view-filter-button]').setDisabled(disabled);
    this.down('[cls~=js-ucan-explorer-view-sync-button]').setDisabled(disabled);
  },

  // endregion Util

  // region Search & Filters

  onFilterEntities: function(cmp, event) {
    if (event.keyCode === event.ENTER) {
      const searchValue = cmp.getValue();
      if (searchValue) {
        this.addFilter('search', {
          search: searchValue
        });
      } else {
        this.removeFilter('search');
      }
      this.onFilterStore();
    }
  },

  onFilterStore: function() {
    const grid = this.getGrid();
    const store = this.getGridStore();
    const keys = Object.keys(this.filters);
    if (!Ext.isEmpty(store)) {
      store.clearFilter();
      store.getProxy().extraParams = {};
      keys.forEach(item => {
        Ext.apply(store.getProxy().extraParams, this.filters[item]);
      });
      store.reload();
    }
    if (keys.length) {
      this.getFilterButton().setHidden(false);
      this.getFilterButton().setBadgeText(keys.length);
    } else {
      this.getFilterButton().setHidden(true);
      this.getFilterButton().setBadgeText('');
    }
    if (!Ext.isEmpty(grid)) {
      const paging = grid.findPlugin('pagingtoolbar');
      if (!Ext.isEmpty(paging)) {
        paging.setCurrentPage(1);
        paging.updateCurrentPage(1);
      }
    }
  },

  onReloadStore: function() {
    this.getGridStore().reload();
  },

  onResetFilter: function() {
    const cmp = this.getSearchField();
    cmp.setValue('');
    this.filters = [];
    this.onFilterStore();
  },

  onClearSearchValue: function(cmp) {
    cmp.setValue('');
    this.removeFilter('search');
    this.onFilterStore();
  },

  addFilter: function(name, filter) {
    this.filters[name] = filter;
    this.onFilterStore();
  },

  removeFilter: function(param) {
    delete this.filters[param];
    this.onFilterStore();
  },

  // endregion Search & Filters

  // region Getter

  getGrid: function() {
    return this.down('[cls~=js-ucan-explorer-grid-view]');
  },

  getFilterButton: function() {
    return this.down('[cls~=js-ucan-explorer-view-filter-button]');
  },

  getSearchField: function() {
    return this.down('[cls~=js-ucan-explorer-view-search-field]');
  }

  // endregion Getter
});