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

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

Ext.define('UCAN.common.entity.list.PinnedGrid', {
  extend: 'Ext.Panel',
  xtype: 'pinnedgrid',
  cls: 'ucan-pinned-grid',

  config: {
    store: null,
    selection: null,
    columns: [],
  },

  twoWayBindable: {
    selection: true,
    columns: true
  },
  publishes: ['store', 'selection', 'columns'],

  layout: 'hbox',
  filters: {},
  height: '100%',
  width: '100%',

  resizable: {
    split: false,
    edges: 'east'
  },

  items: [
    {
      xtype: 'grid',
      cls: 'js-ucan-fix-grid ucan-fix-grid',
      variableHeights: true,
      collapsible: {
        footer: true,
        collapsed: true,
        tool: {
          zone: 'tail'
        }
      },
      scrollable: {
        x: 'scroll',
      },
      listeners: {
        scroll: function(me ,x){
          const scope = this.up('panel');
          scope.getPinnedGrid().getScrollable().scrollTo(x, null, false);
          scope.getScrollableGrid().getScrollable().scrollTo(x, null, false);
        },
        groupcollapse: function(me, group, eOpts) {
          if(!me.up('panel').getScrollableGrid().groupingInfo.header.map[group.beginIndex].collapsed) {
            me.up('panel').getScrollableGrid().groupingInfo.header.map[group.beginIndex].collapse()
          }
        },
        groupexpand: function(me, group, eOpts) {
          if(me.up('panel').getScrollableGrid().groupingInfo.header.map[group.beginIndex].collapsed) {
            me.up('panel').getScrollableGrid().groupingInfo.header.map[group.beginIndex].expand()
          }
        },
        select: function(me, element) {
          me.up('panel').onUpdateSelection(me);
        },
        deselect: function(me, element) {
          me.up('panel').onUpdateSelection(me);
        },
        selectionextenderdrag: function(){
          debugger;
        }
      },
      rowNumbers: false
    },
    {
      xtype: 'grid',
      cls: 'js-ucan-scrollable-grid',
      variableHeights: true,
      collapsible: {
        footer: true,
        collapsed: true,
        tool: {
          zone: 'tail'
        }
      },
      flex: 1,
      viewConfig: {
        rowHeight: 50
      },
      scrollable: {
        x: 'scroll',
        y: 'scroll'
      },
      listeners: {
        scroll: function(me ,x){
          const scope = this.up('panel');
          scope.getPinnedGrid().getScrollable().scrollTo(x, null, false);
          scope.getScrollableGrid().getScrollable().scrollTo(x, null, false);
        },
        groupcollapse: function(me, group, eOpts) {
          if(!me.up('panel').getPinnedGrid().groupingInfo.header.map[group.beginIndex].collapsed) {
            me.up('panel').getPinnedGrid().groupingInfo.header.map[group.beginIndex].collapse()
          }
        },
        groupexpand: function(me, group, eOpts) {
          if(me.up('panel').getPinnedGrid().groupingInfo.header.map[group.beginIndex].collapsed) {
            me.up('panel').getPinnedGrid().groupingInfo.header.map[group.beginIndex].expand()
          }
        },
        select: function(me, element) {
          me.up('panel').onUpdateSelection(me);
        },
        deselect: function(me, element) {
          me.up('panel').onUpdateSelection(me);
        }
      },
      rowNumbers: false
    }
  ],

  // region Update Attributes

  updateStore: function(config) {
    const pinnedGrid = this.getPinnedGrid();
    if (Ext.isEmpty()) {
      pinnedGrid.setStore(config);
    }

    const scrollableGrid = this.getScrollableGrid();
    if (Ext.isEmpty()) {
      scrollableGrid.setStore(config);
    }
  },

  updateColumns: function(config) {
    const pinnedGrid = this.getPinnedGrid();
    const lockedColumns = config.filter(function(item){ return item.locked});
    const scrollableColumns = config.filter(function(item){ return !item.locked});
    if (Ext.isEmpty()) {
      pinnedGrid.setColumns(lockedColumns);
      pinnedGrid.getHeaderContainer().setStyle("visibility:visible");
    }

    const scrollableGrid = this.getScrollableGrid();
    if (Ext.isEmpty()) {
      scrollableGrid.setColumns(scrollableColumns);
      scrollableGrid.getHeaderContainer().setStyle("visibility:visible");
    }
  },

  updateTranslator: function(config) {
    const searchField = this.getSearchField();
    const addButton = this.getAddButton();
    const removeButton = this.getRemoveButton();
    searchField.setPlaceholder(config.get('search'));
    addButton.setText(config.get('add'));
    removeButton.setText(config.get('remove'));
  },

  // endregion

  // region Eventhandling

  onUpdateSelection: function(grid) {
    const selection = grid.getSelections();
    const me = this;
    this.getScrollableGrid().deselectAll();
    this.getPinnedGrid().deselectAll();

    this.getScrollableGrid().suspendEvent('select');
    this.getPinnedGrid().suspendEvent('select');

    this.getScrollableGrid().getSelectable().select(selection);
    this.getPinnedGrid().getSelectable().select(selection);

    this.getScrollableGrid().resumeEvent('select');
    this.getPinnedGrid().resumeEvent('select');

    this.setSelection(selection);
  },

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

  // endregion

  // region Getter

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

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

  // endregion

  //region utils
  scrollto: function(x) {
    this.getPinnedGrid().getScrollable().scrollTo(x, null, false);
    this.getScrollableGrid().getScrollable().scrollTo(x, null, false);
  }
  //

});