PDA

View Full Version : Is there an event fired once a GridPanel is fully loaded with data?



LambyPie
3 Dec 2009, 4:01 AM
I have a page with a GridPanel which I want to print as soon as it is fully loaded, I tried adding window.print() to the end of my Ext.onReady but this prints the grid without any data. I have tried listening to various events but all seem to fire BEFORE the grid is fully populated with the data. Here is stand alone code which demonstrates the issue:

Ext.onReady(function()
{
// create store
var storeAccountData = new Ext.data.JsonStore(
{
idproperty: 'groupId',
fields:['groupId', 'groupName', 'accountNo'],
data:
[
{groupId:'1', groupName:'Group1', accountNo:'13200011'},
{groupId:'1', groupName:'Group1', accountNo:'13200321'},
{groupId:'2', groupName:'Group2', accountNo:'13208527'},
{groupId:'2', groupName:'Group2', accountNo:'13208861'}
]
});

// create grid
var grid = new Ext.grid.GridPanel(
{
store: storeAccountData,
autoHeight:true,
columns:
[
{id:'groupName', header:'Group', dataIndex:'groupName'},
{id:'accountNo', header: "Account No", dataIndex: 'accountNo'}
],
listeners:{afterrender:function(){alert("grid afterrender");}}
});


// create panel
var printPanel = new Ext.Panel(
{
renderTo:Ext.getBody(),
width:800,
autoHeight:true,
layout:'table',
layoutConfig:{columns:1},
items:[grid],
listeners:
{
afterrender:function(){alert("panel afterrender");},
afterlayout:function(){alert("panel afterlayout");},
render:function(){alert("panel render");},
show:function(){alert("panel show");}
}
});
});

Running this with IE7 I get alerts as follows:

panel render - just panel border visible
panel afterrender - as above
grid afterrender - grid with headers visible but no data
panel afterlayout - as above

then after dismissing the last alert the data is displayed! I'm fairly new to ExtJS so feel I must be missing something. What I want some way to trigger my print code ONLY once the data is present in the grid.

Any help/ideas greatly appreciated.

3 Dec 2009, 4:46 AM
the store fires the load event.

3 Dec 2009, 4:47 AM
Btw, learn to use Firefox and firebug as your main developmenet platform. You can do things like use console.log, console.dir, console.warn, console.info, console.error when working with the tool.

LambyPie
3 Dec 2009, 6:00 AM
Thanks for the response. I'm trying to use the store load event but it still seems to fire too early, if I run this modified code:

Ext.onReady(function()
{
var storeAccountData = new Ext.data.JsonStore(
{
idproperty: 'groupId',
fields:['groupId', 'groupName', 'accountNo'],
data:
[
{groupId:'1', groupName:'Group1', accountNo:'13200011'},
{groupId:'1', groupName:'Group1', accountNo:'13200321'},
{groupId:'2', groupName:'Group2', accountNo:'13208527'},
{groupId:'2', groupName:'Group2', accountNo:'13208861'}
],
listeners:{load:function(){alert("store loaded");}}
});

// create grid
var grid = new Ext.grid.GridPanel(
{
store: storeAccountData,
autoHeight:true,
columns:
[
{id:'groupName', header:'Group', dataIndex:'groupName'},
{id:'accountNo', header: "Account No", dataIndex: 'accountNo'}
]
});


// create panel
var printPanel = new Ext.Panel(
{
renderTo:Ext.getBody(),
width:800,
autoHeight:true,
layout:'table',
layoutConfig:{columns:1},
items:[grid]
});
});

The "store loaded" alert pops up but the screen is blank until the alert box is dismissed. If I replace the alert with window.print() the resulting print is blank. Am I doing something wrong?

3 Dec 2009, 6:01 AM
stop using window. print or alert.

try to elevate yourself out of the 1990's style of development.

Get Firefox and firebug and learn how to use them.

Animal
3 Dec 2009, 6:18 AM
Why are you wrapping the GridPanel in a Panel?

LambyPie
3 Dec 2009, 6:18 AM
IE is mandated by the employer sadly. I take your point re using alert but that is just to diagnose the issue, my real issue is that instructing IE to print (via window.print()) in response to the store load event doesn't print the data in the grid. Is there a better way to trigger the client browser to print?

3 Dec 2009, 6:19 AM
then use firebug lite.

Animal
3 Dec 2009, 6:20 AM
They can use IE, but you can develop with Firefox+Firebug! I wouldn't develop in any other environment, and my clients don't want to waste my time/their money on environments where it takes 10 times longer to "debug"!

Animal
3 Dec 2009, 6:22 AM
Wait one or two days and use the new viewready event.

LambyPie
3 Dec 2009, 6:24 AM
Why are you wrapping the GridPanel in a Panel?

Only because I've cut down the code for the forum, in the original there are more items inside printPanel. Cutting down further to this code still gives the same behaviour:

Ext.onReady(function()
{
var storeAccountData = new Ext.data.JsonStore(
{
idproperty: 'groupId',
fields:['groupId', 'groupName', 'accountNo'],
data:
[
{groupId:'1', groupName:'Group1', accountNo:'13200011'},
{groupId:'1', groupName:'Group1', accountNo:'13200321'},
{groupId:'2', groupName:'Group2', accountNo:'13208527'},
{groupId:'2', groupName:'Group2', accountNo:'13208861'}
],
listeners:{load:function(){alert("store loaded");}}
});

// create grid
var grid = new Ext.grid.GridPanel(
{
store: storeAccountData,
autoHeight:true,
renderTo:Ext.getBody(),
width:800,
columns:
[
{id:'groupName', header:'Group', dataIndex:'groupName'},
{id:'accountNo', header: "Account No", dataIndex: 'accountNo'}
]
});
});

CrazyEnigma
3 Dec 2009, 7:04 AM
There are quite a bit of alternatives that you might want to employ that will assist those who are assisting you.

Firefox + Firebug as mentioned. Also, IE8 has a firebug knockoff. If you press F12 you get a very similar console. You can also load FF with an IE switch. So you can switch back and forth between browsers even within FF. It's called IE Tab.

CrazyEnigma
3 Dec 2009, 7:15 AM
Check out this blog (http://blog.extjs.eu/know-how/which-events-are-fired/), this can come in handy to determine the order of events fired.

But if you are not in FF with FireBug, you can't take advantage of this, well not as easily.

LambyPie
3 Dec 2009, 7:58 AM
Thanks CrazyEnigma that's a really useful tip for monitoring the events being raised - I'll use that.

I appreciate the advantages of FireFox etc. but I'm working on a corporate network where my clients end users only have IE so I'm stuck with that. However, I don't understand why it matters what I'm using for development, all I'm looking for is an event to listen to which will only fire once the data in the grid is visible within the browser (when running IE) so I can then issue the window.print() and get the data on the print.

Animal
3 Dec 2009, 8:00 AM
However, I don't understand why it matters what I'm using for development.


So that you can debug.

As in stepping through code line by line monitoring the state of variables.

And examining the DOM in detail, and poking the CSS to ensure it's doing what you need.

This is what you should be doing, not writing code and crossing your fingers!

CrazyEnigma
3 Dec 2009, 9:07 AM
@LambyPie

IE is crap when it comes to development. You will need as many tools as possible to point out the problem. You have decided to be on this forum because you need help, and that you are using the EXT JS framework because the framework does all the grunt work for you in making development easier, so you don't have to mess with cross-browser issues. So it wouldn't be a pain to use FF for debugging. What does it matter to you if you are using something else, even if the corporate standard is to use IE (for corporate end-users)? What you are saying is that if the corporate standard is to use Notepad to develop, you are going to stick to Notepad?

Yes, IE8 has the same line step through, but it's crap compared to FF.

We are only suggesting to use FF, because, if the error was obvious to you, the obvious answer was to use FF.