-
20 Oct 2011 9:58 AM #1
Unanswered: 2 links in cell of grid
Unanswered: 2 links in cell of grid
I have a requirement to provide 2 links in a grid cell. I can't figure out how to provide a click listener for these links. I currently have them wired to global functions but need access to the datastores to save state and extra params.
I have a click listener but it seems to only be at the cell level. I need to provide different actions for each link.
Any suggestions?
-
20 Oct 2011 2:04 PM #2
Interesting.
One way to do this would be to put a listener higher up. For example, you might register an itemclick listener on the grid's view. In the handler you could then build logic that inspects the event object to see whether one of your links was clicked.
For example, you could put different CSS classes on each link to differentiate them and then use something like this in your handler:
Accessing the record is easy as it's already passed to the itemclick handler.Code:var link1 = ev.getTarget('a.link1'); if (link1) { ... }
-
21 Oct 2011 8:15 AM #3
Thanks, added to viewConfig.
listeners: {
itemclick: function( view, record, item, index, event, eOpts ) {
var data = record.data;
var className = event.getTarget().className;
processClickEvent(className, data);
}
}
-
21 Oct 2011 10:39 AM #4
Please use CODE tags when posting code (# button on the editor toolbar).
I strongly advise that you avoid accessing record.data directly. It's a breach of encapsulation. Where possible try to use the get() method on the record. In your case I see no reason not to pass the whole record to your processClickEvent function (though not sure why you need a global function like that).
There are a couple of potential pitfalls around this line:
Firstly, grabbing className like that leaves you vulnerable if you later want to add other classes, e.g. for styling purposes. Secondly, using getTarget() without an argument will grab the wrong element if you add tags within your anchors (try it, add in a span). This may not be a problem right now but it will fail if you change your markup in future. Note how my original suggestion avoids these two problems.Code:var className = event.getTarget().className;


Reply With Quote