PDA

View Full Version : [OPEN-1426] ListView not deselecting items when clicked beneath all items.



JanVenekamp
18 Nov 2010, 7:42 AM
Ext version tested:

Ext 3.3.0


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

IE6
IE8
FF3


Operating System:

Win Vista
Win XP Pro (IE6)


Description:

If the rows in a ListView don't occupy all the space of the container someone would expect to deselect all the selected rows when clicking on the white space beneath the rows. Though this is implemented in DataView this is not working.


Test Case:

The ListView example with the panels height set to 350.
See this URL : http://dev.sencha.com/deploy/dev/examples/view/list-view.html


Steps to reproduce the problem:

Select a row
Click on the space beneath all rows


The result that was expected:

All rows deselected


The result that occurs instead:

No change in selection


Debugging already done:

The problem lies in the fact that the onClick handler that clears the selection is attached to the template target in DataView. But in the ListView the template target doesn't fill the entire space of the container because it uses a different layout. "x-list-body-inner" is the tamplate target, but "x-list-body" stretches over the entire space.


Possible fix:

To fix this the onClick handler should be attached to "x-list-body" instead of "x-list-body-inner". The afterRender function in ListView should be changed to this:



// private
afterRender : function(){
Ext.DataView.superclass.afterRender.call(this);

this.mon(this.getTemplateTarget().parent(), {
"click": this.onClick,
"dblclick": this.onDblClick,
"contextmenu": this.onContextMenu,
scope:this
});

if(this.overClass || this.trackOver){
this.mon(this.getTemplateTarget(), {
"mouseover": this.onMouseOver,
"mouseout": this.onMouseOut,
scope:this
});
}

if(this.store){
this.bindStore(this.store, true);
}
}