0

I have a grid that contains an action column for each row. This action column is an edit icon, and when a user clicks the edit icon, I'm kicking off some websocket events, which will eventually trickle down to other users currently connected to the app. What I want to do is grey out this edit icon for the other users. All of that code is working except: I have no idea how I can access the actual row's action column object.

I can access it by using the grid's view and grabbing that individual node, then setting some sort of CSS, something like this:

var rowHtml = this.getView().getNode(index);
if (rowHtml) {
  var rowDom = Ext.fly(rowHtml);
  if (rowDom) {
    rowDom.down('.someclass').removeCls('enabled').addCls('disabled');
  }
}

That should work, but I also want to update the tooltip, and in general, I just want to be able to access this element.

So, I guess the main question is, when this action column gets created, is it created as a button or some other Ext JS element? The API states that the defaultType for child components is a gridcolumn, but I imagine that's not what this action column really is? Also, is there an easy way of accessing this item as an Ext JS class?

Edit: And I have seen the following threads, but they deal more with rendering the rows... my rows are already rendered:

Hide Icon in Action Column for Particular Row

How to Disable Action Column Item for a Single Row

Community
  • 1
  • 1
incutonez
  • 3,241
  • 9
  • 43
  • 92

1 Answers1

0

I've decided against removing and adding a class. I'm currently doing it a similar way as described above, but like this:

var rowHtml = this.getView().getNode(index);
if (rowHtml) {
  var rowDom = Ext.fly(rowHtml);
  if (rowDom) {
    rowDom.down('.someclass').hide();  // or show, based on some other logic
  }
}

I went with hiding/showing because if I just edit the CSS, the action icon can still be clicked. By hiding/showing, we get rid of that possibility. It's not ideal, but it works as a quick hack.

incutonez
  • 3,241
  • 9
  • 43
  • 92
  • So the only problem I have with my solution is that hiding does not stay set if the view refreshes... I've tried using `Ext.get` instead of `Ext.fly`, but no matter what, when the view refreshes, the icon shows back up... what I need to happen is that the icon's HTML gets set when I use the hide method, so when the view refreshes, it sees the HTML as hidden. Any suggestions? – incutonez Mar 05 '14 at 22:39
  • I eventually abandoned this approach and went with using the `getClass` method for an ActionColumn's [items](http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Action-cfg-items). Related to my [other question](http://stackoverflow.com/questions/22229168/ext-js-saving-dom-manipulation-of-a-grid-row/22229919#22229919). – incutonez Mar 18 '14 at 13:19