PDA

View Full Version : Disable event listener on SelectAll



mfrancey
14 Mar 2011, 6:22 AM
Hi !

I have an event listener to display datas in a panel on rowselect:

grid.getSelectionModel().on('rowselect', function (sm, rowIdx, r) {
Ext.getCmp('mypanel').body.load({
url: 'foo.php',
scripts: true,
params: {
gridId: rowIdx,
id: grid.getSelectionModel().getSelected().get('id')
}
});
});

It works perfectly.

The problem is when I use the header checkbox to select all rows (through CheckBoxSelection Model), it loads the content to the panel one after the other, which could be very heavy if there's a lot of records...

Thanks for your help !

dj
14 Mar 2011, 7:21 AM
Probably the easiest way to accomplish this would be to patch the selectAll-method of the CheckboxSelectionModel.



var selectAll = false, oldSelectAll = grid.getSelectionModel().selectAll;
grid.getSelectionModel().selectAll = function(){
selectAll = true;
oldSelectAll.call(this, arguments);
selectAll = false;
}
grid.getSelectionModel().on('rowselect', function (sm, rowIdx, r) {
if (!selectAll) {
Ext.getCmp('mypanel').body.load({
url: 'foo.php',
scripts: true,
params: {
gridId: rowIdx,
id: grid.getSelectionModel().getSelected().get('id')
}
});
}
});

mfrancey
15 Mar 2011, 6:54 AM
Thanks dj,

Your solution solved a part of my problem...

In fact, that solved the problem when using the selectAll checkbox, but the problem remain on sorting, filtering or grouping the grid.

How to manage this? A event on a click on the columns headers? Or separated event handler on('sort), on('group'), on('filter') ?

Thanks once more for your help...

dj
15 Mar 2011, 9:22 AM
What should happen, when you tick a checkbox of a grid? Looks like then you want to show some related info for that row in another panel. But what happens when you check multiple rows? Do you want to only show the info for the last row? Do you only want to show the info, when the checkbox of a row was checked or do you also want to show the info when you click on that row?

I'm not so familiar with the CeckboxSeelctionModel - what happens when you filter, sort, group what you do not want to happen?

mfrancey
15 Mar 2011, 11:41 AM
Ok,

When I manually select a row on the grid (through the checkbox or by selecting the row), I want to display some content relating to this row in a details panel. This case works fine.

When I use the "selectAll" checkbox in the header, the state remains to the last selected row. The solution you gave suits perfectly.

With having more than one row selected, it loads the content to my details panel one after the other on sorting, filtering and grouping.
Ideally, I would like to have nothing loaded in my details panel on sorting, filtering and grouping, keeping the last state of my details panel. If the last selected record is loaded to the details panel, it would by acceptabe, but not ideal.

Hoping I was clear enough ...

dj
16 Mar 2011, 1:41 AM
Then move your load logic from the rowselect event handler to lower event handlers. The grid has quite some raw event handlers (rowclick etc.) that you could bind to.

Another (hacky) way would be to patch the selection model to fire a new event 'userrowselect'. This only fires when the user selects a row, not when the selection is changed programatically.

Because I'm in a hacky mood right now ;) here is the quick&dirty way:


Ext.grid.CheckboxSelectionModel.prototype.onMouseDown = function(e, t){
if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
if(row){
var index = row.rowIndex;
if(this.isSelected(index)){
this.deselectRow(index);
}else{
this.selectRow(index, true);
this.grid.getView().focusRow(index);
this.fireEvent('userrowselect', this, index); // this line is new
}
}
}
};

grid.getSelectionModel().on('userrowselect', function (sm, rowIdx, r) {
Ext.getCmp('mypanel').body.load({
url: 'foo.php',
scripts: true,
params: {
gridId: rowIdx,
id: grid.getSelectionModel().getSelected().get('id')
}
});
});

mfrancey
16 Mar 2011, 3:05 AM
Thanks dj for your answer and advices that seems to put me on the right way :)

Let's say now that I'm in a smart and clean mood... :-?

I tried this:


grid.on('rowclick', function (grid, rowIndex, e) {
Ext.getCmp('myPanel').body.load({
url: 'foo.php',
scripts: true,
params: {
id: grid.store.getAt(rowIndex).get('id')
}
});
});


Which seems to work fine... (need further tests but seems ok)