PDA

View Full Version : React on <a href="..."> click



Snoop74
17 May 2010, 3:23 AM
Hello.

I create a DataView with a template:


var myTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-grid-group dataview" style="padding:5px;">',
'<div class="x-grid-group-hd dataview-group-header"><div><b>{text}</b></div></div>',
'<div class="x-grid-group-body">',
'<tpl for="children">',
'<a href="#" id="OpenWin_{id}" class="overview_{enabled}" style="text-decoration:none;"><div class="dataview-item"><b>{text}</b><br /><small>{hint}</small></div></a>',
'</tpl>',
'</div>',
'</div><br clear="all" />',
'</tpl>',
'<div class="dataview-border"></div>'
);

var dataview = new Ext.DataView({
store: store,
tpl: myTemplate,
itemSelector: 'li.phone',
singleSelect: true,
multiSelect: false,
autoScroll: true
});

Now i want to open a new ExtJS window on a click on the <a> link.

{enabled} is "true" or "false", so I tried it with:


Ext.select('.overview_true').on('click', function(event) {
alert("OPEN ...");
});

Also tried with the unique ID and with and without leading "." in the elementname.

Any solutions ?

Condor
17 May 2010, 4:04 AM
You can only do the Ext.select() after the DataView has rendered the rows.

I would recommend using a single click event handler with a delegate, e.g.

dataView.on('render', function(c){
c.getEl().on('click', function(e, t) {
alert("OPEN ...");
}, c, {delegate: '.overview_true'});
});

ps. Using singleSelect:true or multiSelect:true will cause the event to be stopped. Either use singleSelect:false and multiSelect:false or switch to using the mousedown event.

Snoop74
17 May 2010, 4:48 AM
Hi Condor,

like all your answers - bull's eye :)
It's working perfectly.

Thanks a lot,
Snoop