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

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

Ext.define('UCAN.explorerView.src.ExplorerTreeView', {
  extend: 'Ext.grid.Tree',
  xtype: 'explorerTreeView',
  cls: 'js-ucan-explorer-tree-view ucan-explorer-tree-view',

  config: {
    treeStore: null,
    treeSelection: null,
    rootName: 'Exams'
  },

  bind: {
    selection: '{treeSelection}'
  },

  plugins: {
    gridcellediting: {
      triggerEvent: 'longpress'
    }
  },

  selectable: {mode: 'single'},
  rootVisible: false,
  hideHeaders: true,
  rowLines: true,
  rowNumbers: false,
  viewModel: true,

  columns: [
    {
      xtype: 'treecolumn',
      sortable: true,
      flex: 10,
      dataIndex: 'name',
      renderer: function(val, record) {
        if (record.data.id === '-1') {
          return this.up('tree').getRootName();
        } else {
          return val;
        }
      },
      cell: {
        encodeHtml: false
      },
      editor: {
        xtype: 'textfield',
        required: true,
        ignoreNoChange: true,
        cls: 'ucan-explorer-tree-view-column-editor'
      }
    },
    {
      xtype: 'treecolumn',
      flex: 1,
      cell: {
        xtype: 'widgetcell',
        widget: {
          xtype: 'button',
          iconCls: 'x-fa fa-plus',
          ui: 'addEntityButton',
          handler: 'onAddFolder',
          bind: {
            value: '{record}',
            tooltip: '{translator.add}'
          }
        },
        hidden: true
      }
    },
    {
      xtype: 'treecolumn',
      flex: 1,
      cell: {
        xtype: 'widgetcell',
        widget: {
          xtype: 'button',
          iconCls: 'x-fa fa-minus',
          ui: 'removeEntityButton',
          handler: 'onClickRemove',
          bind: {
            tooltip: '{translator.remove}'
          }
        },
        hidden: true
      }
    },
    {
      xtype: 'treecolumn',
      flex: 1,
      cell: {
        xtype: 'widgetcell',
        widget: {
          xtype: 'button',
          iconCls: 'x-fa fa-check',
          ui: 'addEntityButton',
          handler: 'onDeleteFolderOK',
          bind: {
            tooltip: '{translator.dialog_accept}'
          }
        },
        hidden: true
      }
    },
    {
      xtype: 'treecolumn',
      flex: 1,
      cell: {
        xtype: 'widgetcell',
        widget: {
          xtype: 'button',
          iconCls: 'x-fa fa-times',
          ui: 'removeEntityButton',
          handler: 'onDeclineRemoveFolder',
          bind: {
            tooltip: '{translator.dialog_cancel}'
          }
        },
        hidden: true
      }
    }
  ],

  listeners: {
    painted: function() {
      this.items.items[2].cells[1].show();
    },
    childtap: 'onOpenFolder',
    childlongpress: function(tree, location) {
      location.row.cells[1].hide();
      location.row.cells[2].hide();
    },
    deselect: function(component) {
      this.onUpdateTreeSelection(component, null);
    },
    select: function(component, selection) {
      this.onUpdateTreeSelection(component, selection);
    },
    childmouseenter: function(tree, location) {
      if(Ext.isEmpty(location.row.cells[0].getColumn().getEditor().$activeLocation)) {
        if (location.row.cells[0]._record.id !== '-1') {
          location.row.getCells()[2].show();
        }
        location.row.getCells()[1].show();
        location.row.getCells()[3].hide();
        location.row.getCells()[4].hide();
      }
    },
    childmouseleave: function(tree, location) {
      if (location.row.cells[0]._record.id !== '-1') {
        location.row.getCells()[1].hide();
      }
      location.row.cells[2].hide();
      location.row.cells[3].hide();
      location.row.cells[4].hide();
    }
  },

  onUpdateTreeSelection: function(tree, selection) {
    this.setTreeSelection(selection);
    Ext.ComponentQuery.query('portfolios')[0].getViewModel().set('selectedFolder', selection);
  }
});