PDA

View Full Version : Ext.ux.ClickActionPanel



neall
13 Aug 2008, 11:34 AM
Hi all,

This is my first ux, so comments are appreciated. This is just a simple extension of the Panel class that traps clicks on anchor links and fires events corresponding to 'clicked_on_id-of-the-anchor'. This is useful for link-out panels (i.e. for reporting, etc.).

Screenshot Attached, Code here:


/**
* Ext.ux.panel.ClickActionPanel
* @extends Ext.Panel
* @author neall
* @date 2008-08-13
*
* A specialized panel that captures clicks on <a> elements and fires
* events corresponding to 'clicked_on_' plus the anchor's id.
*
* Sample Config:
* ----------------------------------------------------------------------------
* {
* xtype: 'clickActionPanel',
* title: 'Click Action Panel',
* bodyStyle: 'padding: 10px;',
* html: '<ul id="my-list"> \
* <li> \
* <img src="'+Ext.BLANK_IMAGE_URL+'" class="icon-actionOne"/> \
* <a id="actionName" href="#">Click here</a><br /> \
* <span>Click the link above to fire "clicked_on_actionName".</span> \
* </li> \
* </ul>'
* }
* ----------------------------------------------------------------------------
* When the "Click here" link is clicked, the ClickActionPanel will fire an
* event called "clicked_on_actionName". Note that this is not technically
* fired on a 'click' event, but rather on 'mousedown'.
*
* The class is registered with an xtype of 'clickActionPanel'
*/

Ext.ux.ClickActionPanel = Ext.extend(Ext.Panel, {

doAction: function(e, t){
e.stopEvent();
this.fireEvent('clicked_on_' + t.id);
// Uncomment the line below if you want to log the events that are fired
// to the Firebug console. This can come in handy when debugging.
//console.log('ClickActionPanel fired event: click_on_' + t.id);
},

onRender: function () {
Ext.ux.ClickActionPanel.superclass.onRender.apply(this, arguments);
this.body.on('mousedown', this.doAction, this, {delegate:'a'});
this.body.on('click',Ext.emptyFn,null,{delegate:'a', preventDefault:true});
}

});

Ext.reg('clickActionPanel', Ext.ux.ClickActionPanel); // register xtype

evant
13 Aug 2008, 4:49 PM
Is there any reason you haven't added an event name?

I would have expected fireEvent to look like:



this.fireEvent('anchorclick', this, e.getTarget(null, null, true))

fangzhouxing
16 Aug 2008, 7:21 AM
neall,thank you for sharing this great code,I have used it in my current project.