Render Ext buttons into rendered DataView

[amcsi]

I would like to render buttons...

	var sharerPrevButton = new Ext.Button({
		text: '<-',
		myStore: sharerStore,
		handler: function(b, e) {
			b.myStore.changeThumbnail(false)
		}
	})
	var sharerNextButton = new Ext.Button({
		text: '->',
		myStore: sharerStore,
		handler: function(b, e) {
			b.myStore.changeThumbnail(true)
		}
	})

to the the template of the dataview...

	var sharerExtraTpl = new Ext.XTemplate([
		'<tpl for=".">',
		'<div float:left>',
		'<img src="{thumbnailURL}" alt="{title} />',
		'<div id="sharerWindowThumbnailPrev"></div>',
		'<div id="sharerWindowThumbnailNext"></div>',
		'</div>',
		'<div><h1>{title}</h1></div>',
		'<div>{description}</div>',
		'</tpl>'
	])

(although there's a for loop, there's always only 1 record)
... I have an event for my store on load...

	sharerStore.on('load', function(r, o) {
		console.info('load')
		console.info(sharerPrevButton)
		console.info(document.getElementById('sharerWindowThumbnailPrev'))
	})

but it doesn't ever see document.getElementById('sharerWindowThumbnailPrev')
how do I render into dataview? neither of the rendered divs with ids are ever seen.

[Condor]

If you don't do this carefully you will create memory leaks.

I recommend using a ComponentDataView (see User extensions forum).

[Animal]

Also, read your template. float:left is meaningless.

And you have hardcoded element IDs which is a bad idea.

[amcsi]

May I know why?
I'll try to be careful

[Condor]

The id="sharerWindowThumbnailPrev" and id="sharerWindowThumbnailNext" divs are replicated for every record. This will generate you invalid HTML, because ids need to be unique.

Also, getElementById will fail, because it will only return the first occurance of the id.