PDA

View Full Version : [BUG?]cant use elements in XTemplate?



w00
7 Jun 2009, 3:12 PM
Nornally when i create a div in a html file i can get the contents with it, like so:

Ext.get('myDiv');

But when the div is defined in a XTemplate, then i can't do anything with it... So for instance:



this.thumbTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div id="testdiv"></div>
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span>{shortName}</span></div>',
'</tpl>'
);
this.thumbTemplate.compile();


So if i want to detect a mouseclick on my 'testdiv' then normally this would work:


Ext.get('testdiv').on('click', function(){
alert('blaat');
});


But this doesn't work now because the div is in XTemplate ... Is this a bug.. or is there another way to achieve my goal!?

Thanks for any help.

tryanDLS
7 Jun 2009, 5:22 PM
testdiv won't exist until you apply some data to the template (not just compile).

makana
7 Jun 2009, 9:08 PM
...and be careful with ids! In your template, if more than one dataset exists, the id "testdiv" will be created several times. But ids have to be unique in the whole document.

w00
7 Jun 2009, 11:01 PM
Ok yeah, sounds logical that it doesn't exists until it's created. Didn't think about that :)

And assigning a unique value to that testdiv isn't a problem, i could just keep a counter++ in my code, adding a unique number everytime a new one is created.

But i guess i'll still get problems when i want to add an aventhandler to that div when it is created (if that is even possible).

So i thought maybe it's better to create a toolbar. But that also didn't work... Any idea why??



var toolbar = Ext.Toolbar({
renderTo: 'test',
items: [
{ xtype: 'button', text: 'test'}
]
});


Which i got from this video tutorial (goto 11:39 for the code)
http://colinramsay.co.uk/screencasts/extjsupload/

Animal
7 Jun 2009, 11:22 PM
It looks like you should be using a DataView.

w00
8 Jun 2009, 12:27 AM
It looks like you should be using a DataView.
I added a dataview, like so:

var dv = new DataView({
//code here etc..
});

The dataview works, it shows a few images. But i'm still not sure what to do with the toolbar.. Cause in the movie he just made a div and renders to it? I can't see why its dependent on a dataview. Could you please explain?

Animal
8 Jun 2009, 1:20 AM
Explain what?

Could you explain what you want?