PDA

View Full Version : Render Ext buttons into rendered DataView



amcsi
14 Sep 2010, 5:26 AM
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
14 Sep 2010, 5:49 AM
If you don't do this carefully you will create memory leaks.

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

Animal
14 Sep 2010, 5:52 AM
Also, read your template. float:left is meaningless.

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

amcsi
14 Sep 2010, 5:54 AM
May I know why?
I'll try to be careful :D

Condor
14 Sep 2010, 5:57 AM
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.