Updating and rerendering components in ExtJS 4.2

Question

Is there a way to re-render components upon tab switch? I have this data that loads all its store, which contains specific permissions. Each tab must only contain what was provided for their view. See my screenshot below:

Basically, this loads upon initComponent. The dilemma I'm currently having is that the Backoffice tab has a different permission with the Wombat tab. The idea is when either of them contains a permission say an Edit permission (sCreate), only that role is allowed to show the edit buttons as seen. So Backoffice has sEcommCreate while Wombat has sCreate. When either of them satisfies to true, it simply adds/pushes it to the column to be displayed during initComponent.

if (EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission)) {
  aColumns.push({
    header: 'Action',
    xtype: 'actioncolumn',
    itemId: 'edit-role-btn',
    width: 100,
    sortable: false,
    resizable: false,
    draggable: false,
    menuDisabled: true,
    items: [{
      icon: 'resources/img/editpermissions.png',
      tooltip: 'Edit Permissions',
      scope: oMe
    }],
    editor: {
      xtype: 'text',
      name: 'editRow',
      cls: 'banks-delete-row'
    }
  });

}

How do I filter out the display upon switching on the other tab, and also on load? Currently, once sCreate or sEcommCreate passes its condition, it just adds the buttons on both roles since this is one single store.

Already tried reloading the data store from the controller, but it only loads the data, and not rerender the components to either add/remove/show/hide them.

To be more clear, I need to hide/remove the Action column if it has no create permissions assigned to it.

Alexander Alexander · Accepted Answer · 2016-04-27T07:51:09

The actioncolumn and all actioncolumn items have a function isDisabled. I would recommend to use that function to enable/disabled the item, e.g.

items: [{
  icon: 'resources/img/editpermissions.png',
  tooltip: 'Edit Permissions',
  isDisabled:function() {
      var isWombatTab = (this.up('tabpanel').getActiveTab().text == 'Wombat');
      if(isWombatTab) return EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission)
      else return EcommBackoffice.plugin.Security.getAccess(oMe.sEcommCreatePermission)
  },
  scope: oMe
}],

isDisabled() will be processed during grid refresh, so whenever you reload the store, the changes should come into effect. To force a refresh without changes to the store, you could of course call grid.refresh() from the activate event of the tabs.

It should then possible to hide the disabled item via CSS. I don't know exactly what it will take (may also depend e.g. on the theme you use), but a first guess is

.x-grid-cell-edit-role-btn .x-item-disabled {
  visibility:hidden;
}

Updating and rerendering components in ExtJS 4.2

1 Answers