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

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

Ext 3.3.0

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:


Operating System:

Win Vista
Win XP Pro (IE6)


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(){

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

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

this.bindStore(this.store, true);