Delayed rowselect event in grid when using arrow keys

[mschering]

I used the rowselect event do display information from the server. When a user clicked on a row this was no problem. But when using the arrow keys it immediately sent a request to the server. This is problematic when a user holds down the arrow key to scroll the list. The app would send a hundred requests to the server. So I created a new "delayedrowselect" event. When a user clicks on a row there's no delay but with the arrow keys it will fire only after 400ms.

I have an extended class of the gridpanel and I've put this in the initComponent:



//create a delayed rowselect event so that when a user repeatedly presses the
//up and down button it will only load if it stays on the same record for 400ms
this.addEvents({'delayedrowselect':true});

this.on('rowclick', function(grid, rowIndex){
var record = this.getSelectionModel().getSelected();
this.fireEvent('delayedrowselect', this, rowIndex, record);

this.rowClicked=true;
}, this);

this.getSelectionModel().on("rowselect",function(sm, rowIndex, r)
{
if(!this.rowClicked)
{
var record = this.getSelectionModel().getSelected();
if(record==r)
{
this.fireEvent('delayedrowselect', this, rowIndex, r);
}
}
this.rowClicked=false;
}, this, {delay:400});


I hope this is helpful to someone.

[jack.slocum]

This is the common problem that the buffer event option was added to solve. You can do it on any event.

For example:


grid.getSelectionModel().on('rowselect', yourFn, yourScope, {buffer: 200});

If they key through the grid quickly, only when they stop will the event fire on that row.

[mschering]

Oops :"> I overlooked that. Thanks!