Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Is there an event fired once a GridPanel is fully loaded with data?

  1. #1
    Ext User
    Join Date
    Dec 2009
    Location
    Hertford, UK
    Posts
    15

    Default Is there an event fired once a GridPanel is fully loaded with data?

    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.

  2. #2

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    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.

  4. #4
    Ext User
    Join Date
    Dec 2009
    Location
    Hertford, UK
    Posts
    15

    Default

    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?

  5. #5
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    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.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Why are you wrapping the GridPanel in a Panel?

  7. #7
    Ext User
    Join Date
    Dec 2009
    Location
    Hertford, UK
    Posts
    15

    Default

    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?

  8. #8

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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"!

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Wait one or two days and use the new viewready event.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •