PDA

View Full Version : DataView selectionchange event won't fire



markjlyon
30 Jan 2011, 11:07 AM
I have a problem where the DataView selectionchange event won't fire.

I can get the click event to work but there is no way to bind a selectionchange event to a DataView. All examples included with 3.3.1 fail to fire any DataView selectionchange events and adding the selectionchange listener makes all other events bound to the same listener for that DataView stop working.

ExtJS version 3.3.1
This fails in IE, Firefox, Safari, Chrome.

There NO errors being reported in IE (F12) or Firebug.

It simple fails to work.

The dataview renders properly and if I trade out the selectionchange for a click, the click works. But if I add a click to the listeners then both the click and the selectionchange fail.



<style type="text/css">
.x-view-over
{
background-color:#FFFF99;
cursor: pointer;
}
.preview-info
{
padding:3px;
border-bottom:solid1px#99BBE8;
}
</style>
<scripttype="text/javascript">
Ext.onReady(function(){
var previewData = [{
id: '1',
thumbsrc: 'images/toolbars/experience/16/alpha.png',
fullName: 'Last Name, First Name',
cause: 'Alpha'
},{
id: '2',
thumbsrc: 'images/toolbars/experience/16/beta.png',
fullName: 'Last Name, First Name',
cause: 'Beta'
},{
id: '3',
thumbsrc: 'images/toolbars/experience/16/Gamma.png',
fullName: 'Last Name, First Name',
cause: 'Gamma'
},{
id: '4',
thumbsrc: 'images/toolbars/experience/16/Alpha.png',
fullName: 'Last Name, First Name',
cause: 'Alpha'
},{
id: '5',
thumbsrc: 'images/toolbars/experience/16/Beta.png',
fullName: 'Last Name, First Name',
cause: 'Beta'
},{
id: '6',
thumbsrc: 'images/toolbars/experience/16/Gamma.png',
fullName: 'Last Name, First Name',
cause: 'Gamma'
},{
id: '7',
thumbsrc: 'images/toolbars/experience/16/Alpha.png',
fullName: 'Last Name, First Name',
cause: 'Alpha'
},{
id: '8',
thumbsrc: 'images/toolbars/experience/16/Beta.png',
fullName: 'Last Name, First Name',
cause: 'Beta'
},{
id: '9',
thumbsrc: 'images/toolbars/experience/16/Gamma.png',
fullName: 'Last Name, First Name',
cause: 'Gamma'
},{
id: '10',
thumbsrc: 'images/toolbars/experience/16/Alpha.png',
fullName: 'Last Name, First Name',
cause: 'Alpha'
},{
id: '11',
thumbsrc: 'images/toolbars/experience/16/Beta.png',
fullName: 'Last Name, First Name',
cause: 'Beta'
},{
id: '12',
thumbsrc: 'images/toolbars/experience/16/Gamma.png',
fullName: 'Last Name, First Name',
cause: 'Gamma'
},{
id: '13',
thumbsrc: 'images/toolbars/experience/16/Alpha.png',
fullName: 'Last Name, First Name',
cause: 'Alpha'
},{
id: '14',
thumbsrc: 'images/toolbars/experience/16/Beta.png',
fullName: 'Last Name, First Name',
cause: 'Beta'
},{
id: '15',
thumbsrc: 'images/toolbars/experience/16/Gamma.png',
fullName: 'Last Name, First Name',
cause: 'Gamma'
}];
var previewTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div class="preview-info" id="{id}">',
' <div class="thumb">',
' <img src="{thumbsrc}" title="{cause}">',
' </div>',
' <span>{fullName}</span><br/>',
' <span>{cause}</span>',
'</div>',
'</tpl>'
);
previewTemplate.compile();
var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView (0 items selected)',
items: new Ext.DataView({
data: previewData,
tpl: previewTemplate,
autoHeight: true,
singleSelect: true,
overClass: 'x-view-over',
itemSelector: 'div.preview-info',
emptyText: 'Empty',
listeners: {
selectionchange: function(t,n) {
alert('!');
}
}
})
});
panel.render(document.body);
});
</script>


Can anyone help me figure out why this won't work?

I am completely stumped.