Handling events from HTML anchor tags in ExtJS
I have a large application built in ExtJS and am looking for the best way to handle custom events from anywhere in the application. For example I might want to put an anchor tag in some text in the application which will open a custom component in my app. At the moment I listen to clicks on the body and if the target has a css class applied to it in a certain format I use that to perform an action.
For example I might have:
<a class="ACTION-View-Customers">View Customers</a>
My event handler will pull the classname apart and do the action. The problem with this approach is that it's difficult to pass many parameters through to the handler. What I propose is to use JSON inside the anchor's class or href tags, like so:
<a href="#" class="{ action: 'View', options: { name: 'Customers', type: 'All' } }">View Customers</a>
Can you think of any problems with this approach and suggest any alternatives? Thanks.
I personally would not use additional meta in the HTML itself, if it can be helped. I would apply specific IDs to links of specific purpose, and bind a click event to that object. I've also found the DomQuery object (needed to find and reference the anchors) interesting to work with. Since I usually use the JQuery adapter with Ext JS, I'll use JQuery's selectors to locate the specific DOM element, and JQuery's bind functions [.click(fn)], while using Ext internal to the function itself. JQuery and Ext JS make a great combo, especially with the new JQuery 1.3.1, which really speeds things up.
I suggest using HTML5's data- attributes. For example:
<a href="#" data-event="{ action: 'View', options: { name: 'Customers', type: 'All' } }">View Customers</a>
var eventsource = link.getAttribute("data-event");
HTH
As you might know, HTML tag accepts ANY named attribute. So you may create some specifically called attribute(s) and pass any value(s) to them (fe my-bogus-param="something" ), By this you can develop any sophisticated parameter passing system. Then you can parse these attributes in event handler.