PDA

View Full Version : ListView and column template



ajmott
5 Jan 2010, 4:51 PM
I'm an ExtJS newbie (though I've been using GWT-Ext for quite some time in an enterprise environment) and am struggling a little. I'm trying to add a simple template to the list-view.js in /ext-3.1.0/examples/view. The template is simply to make the text of one of the columns of data into a link. The template is applied, and the text is indeed turned into a link. However, when I click the link, nothing happens. Using firebug I've verified that the HTML looks correct for the rendered link. Is there any kind of listener/handler that I should have also attached? The following is the change that I made to the list-view.js file (the tpl property was simply added to the first colum "File"):



tpl: new Ext.XTemplate('{name:this.getLink}',{
getLink : function(val,record) {
return String.format('<a href="http://www.google.com/{1}" target="_blank">{0}</a>', val,record.url);
}
})


If I've simply missed something in the documentation, a gentle pointer would be appreciated. (Or if the defect is more glaring, flog away.)

aconran
5 Jan 2010, 5:07 PM
This is a feature of the Ext.DataView (the parent class of Ext.ListView). Whenever you click on an item it will prevent the default action from occurring. You could do something like so....



listView.on('click', function(dv, idx, n, e) {
var anchor = e.getTarget('a');
window.open(anchor.href);
});


Or perform even more complex actions by pulling out additional information from the underlying Ext.data.Record.

ajmott
5 Jan 2010, 5:19 PM
Ah - that makes sense then. I had gotten it to work by adding my own onclick event to the anchor tag manually in the template, but I figured there had to be a "proper" way to do it via pre-existing handlers. Thanks for the help, Aaron!