[OPEN] [#1370] [4.1.0-beta] Grid - "Lazy loading" - issue with layout.

  1. #1

    [OPEN] [#1370] [4.1.0-beta] Grid - "Lazy loading" - issue with layout.

    I'm loading data into the store in a delayed function. The grid-layout gets messed up, and only the upper-half part of each row is showing (see picture attached below the code):
    @{
        var x = Html.X(); 
    }
    
    @(
        x.Grid()
            .Columns(
                x.Column()
                    .DataIndex("Name")
                    .Text("Name")
                    .Flex(1)
            )
            .Store(x.Store())
            .Listeners(l => l.Initialize.Handler= @"
    
                //Using setTimeout to make a delay and simulate that the data comes later in the workflow.            
    
                setTimeout(function(){
                    var data =  [];
                    for(var i=0; i<1000; i++)
                        data.push({Name:'Name'+i, });
                    item.getStore().loadData(data);
                },200);
    
                // I have tried item.refresh() here, but it doesn't help.
            ")
    )
    This is how it looks:
    Click image for larger version. 

Name:	Ext-Test-Grid-Lazy.JPG 
Views:	80 
Size:	13.5 KB 
ID:	24716
    Last edited by fabricio.murta; Aug 16, 2016 at 5:14 AM.
  2. #2
    Hello!

    The grid examples you are posting are not working without either setting a height on the grid or adding the .Fullscreen(true) setting. Probably you are doing something to have these examples working on your side with the code as you are providing.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Well, but I could reproduce the issue in the end. We've logged it under #1370 and hope to be able to fix it soon! Thanks for reporting it!
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Yes, I am loading the examples into a Viewport using a common controller, for the simplicity. I didn't know about the .Fullscreen(true) setting until now. I'll try it.
    Last edited by sveins12; Aug 16, 2016 at 11:23 AM.
  5. #5
    Hello,

    I've reported it to Sencha:
    https://www.sencha.com/forum/showthread.php?319858

    As a workaround I can suggest setting this for the Grid:
    .ItemHeight(45)
    or running this code after loading the data:
    grid.setItemHeight(45);
    grid.Grid1.refresh();
  6. #6

Similar Threads

  1. Replies: 1
    Last Post: Apr 06, 2016, 12:05 PM
  2. Replies: 3
    Last Post: Jan 28, 2016, 6:13 PM
  3. Replies: 6
    Last Post: May 31, 2013, 3:04 AM
  4. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Posting Permissions