PDA

View Full Version : Which is the right event to toggleGroup



Flocke25
3 Mar 2010, 7:13 AM
Hallo everybody. I'm new to ext js and have a small problem.
I'm working with a groupingStore-Example. Now I want to start with all group collapsed except the first one. I added

startCollapsed: trueto the GroupingView and

grid.getView().toggleRowIndex(0, true);
grid.getView().refresh(true);at the end of the Ext.onReady()-Function.
But I got all groups collapsed. If I put

grid.getView().toggleRowIndex(0, true);into the button-function and click on them, then it works as wished, but what can I do to get the same result without using a button.
I tried the following code:


grid.getView().on('render', function(){
grid.getView().toggleRowIndex(0, true);
});
but it didn't work too.
Can anybody explain me which event should be called?
Thank you in advance.

tobiu
3 Mar 2010, 7:20 AM
welcome flocke25,

i wrote an override for this =)
take a look at:
http://www.extjs.com/forum/showthread.php?t=88860


kind regards,
tobiu

Flocke25
3 Mar 2010, 11:57 PM
Thank you for the help.
It works pretty well :).

Chief Vas
31 Oct 2010, 11:43 AM
I'm not sure why the above reply from tobiu worked as it sounded like the OP had the same problem I did. If I tried to expand a group using code, when the page and data are loaded it fails but I can easily toggle the group every time using a button to execute the same lines. I think the problem is the asynchronousness (if that is a word) of Ext. The datastore is still loading so when the code went to find the groupID and expand it, it did not exist yet? It looks like tobiu's link just adds a toggleGroup event? Both with this override in and with the original Ext code it would fail right after the line " var gel = Ext.get(group);" with a "gel is null" error from FireBug. I have one set of data where the group to expand was not in the data set and it always gave me the error so I added code to check for the value in the data store first.

My original code for the GridPanel: (this was hit or miss. Without changing any code sometimes it would work, some time it would error out with the 'gel is null' error)

var gridAccellActive = new Ext.grid.GridPanel({
store : dsAccellActive,
colModel : cmActive,
autoExpandColumn:'description',
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
frame : false,
stripeRows : true,
loadMask : true,
view : viewAccellActive,
listeners :{
viewready :function(){
grpID = viewAccellActive.getGroupId('odh');
viewAccellActive.toggleGroup(grpID,true);
}
}
});
Wrapping it in an IF checking the data store for the group I want expanded: (in this case the group to expand is called 'odh')

var gridAccellActive = new Ext.grid.GridPanel({
store : dsAccellActive,
colModel : cmActive,
autoExpandColumn:'description',
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
frame : false,
stripeRows : true,
loadMask : true,
view : viewAccellActive,
listeners :{
viewready :function(){
if(dsAccellActive.find('type','odh')!= -1){
grpID = viewAccellActive.getGroupId('odh');
viewAccellActive.toggleGroup(grpID,true);
}
}
}
});
I don't know if executing the find causes it to wait for the store to finish loading then when it does execute the code to expand the group the group will definitely be there.

Chief Vas
1 Nov 2010, 8:57 AM
Did some more experimenting to better explain what's going on. I added a listener to the data store that outputs console.log('Store Loaded') when the data store is loaded. I also added to the viewready listener in the grid panel a console.log('View Ready') which shows when the view is ready. The other console.log()s are just for debugging to show me it is grabbing a groupID and what Ext.get(grpID) returns since that is essentially the function that fails.


var dsAccellActive = new Ext.data.GroupingStore({
groupField :'type',
sortInfo :{
field :'type',
direction :'ASC'
},
reader : commonJSON,
baseParams : { Action :'get_active',
Where :'ACC'},
proxy : new Ext.data.HttpProxy({
url :'Ext_interlock.php',
method :'POST'
}),
listeners :{
load: function(){
console.log('Store loaded');
}
}
});

var gridAccellActive = new Ext.grid.GridPanel({
store : dsAccellActive,
colModel : cmActive,
autoExpandColumn:'description',
sm : new Ext.grid.RowSelectionModel({singleSelect:true}),
frame : false,
stripeRows : true,
loadMask : true,
view : viewAccellActive,
listeners :{
viewready :function(){
console.log('View Ready');
if(dsAccellActive.find('type','odh')!= -1){
grpID = viewAccellActive.getGroupId('odh');
console.log(grpID);
console.log(Ext.get(grpID));
viewAccellActive.toggleGroup(grpID,true);
}
}
}
});
When the console shows: "Store Loaded" before "View Ready" the group toggled as it should. However there were random times (server random delays in getting the data?) when "View Ready" showed up before "Store Loaded" and each of those times the group did not toggle.

When I began searching the issue on the forum I had come across the solution of executing the toggleGroup on viewready which I guess means everything is rendered in the DOM and ready to be manipulated. I also came across the OP which sounded like the exact problem I was having. Executing on viewready seemed like the solution but it now appears one also must wait for the store to be loaded.

Hummmm, how does one coordinate waiting for two events to be completed? Since the store must be loaded first I guess I could check for that within viewready. Maybe a while loop with some sort of delay and a counter so that it exits the loop after xx number of delays so we don't get stuck in the loop? Any better or elegant suggestions anyone?