PDA

View Full Version : Getting a specific row's action column.



incutonez
4 Mar 2014, 9:31 AM
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 (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Action-cfg-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?

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 (http://www.sencha.com/forum/showthread.php?113590-Hide-icon-in-action-column-for-particular-row)
How to Disable Action Column Item for a Single Row (http://stackoverflow.com/questions/15544482/how-to-disable-action-column-item-for-a-single-row)

incutonez
5 Mar 2014, 10:08 AM
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
5 Mar 2014, 2:28 PM
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?