Results 1 to 5 of 5

Thread: Performance issue during layout of large number of grids with empty text specified

  1. #1
    Sencha User
    Join Date
    Dec 2015
    Posts
    1

    Default Answered: Performance issue during layout of large number of grids with empty text specified

    TLDR: Lots of small grids cause performance issue when they don't have a fixed height. I don't want a fixed height
    and I want no performance issue. See Fiddle at: https://fiddle.sencha.com/#fiddle/136a

    Elaboration:

    I have an interesting layout case I'm failing to implement properly.

    I have a series of small grids that I'm using as lists in a planning interface. Each row of my UI has 4 grids, and I could have 30-40 rows total.

    I have three requirements: #1, I want the user interface to show up as fast as possible. #2, I want the grids to grow vertically down in place as items are added. #3, I want the grids to display text when there is no data available.

    Each row is contained by an 'hbox'. The 'hbox' rows live inside a 'vbox'.

    My grids look like:
    {xtype: 'grid',
    width: 202,
    //height: 60,
    margin: '0 0 0 10',
    viewConfig: {
    deferEmptyText: false,
    emptyText: 'No data',
    },
    columns: [{header: 'Name', width: 200, dataIndex: 'name'}]
    }

    When used as above, requirement #1 is not met because Ext-JS is doing extra layout work in order to display the empty text. I know this because the rows/grid column headers show up immediately and then after a long delay the empty text part of the grids appear.

    Uncommenting the line "height:60" fixes #1 and now Ext-JS happily finishes the layout immediately.

    But then this violates requirement #2 since adding items to a grid doesn't alter the height of the grids and instead I get tiny scrollbars.

    I'm confident I'm missing some of the finer points of layout in Ext-JS and appreciate any insight.

  2. Are you simply going to display a list of items in the grid and nothing else? If that is the case then you probably don't need a grid. You could instead simply use a boxcomponent with tpl config (template) to render the list within the component. Take a look at this example:

    https://fiddle.sencha.com/#fiddle/136e

    As you can see, this has variable height for each list container and renders very fast.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Your requirement of having to resize the grids to display the EmptyText in a layout the is dynamic (vbox/hbox) is simply a killer.

    This is causing your entire display to redraw each time to resize the grid(s), then the containers, then the viewport each time.

    To show how this is working, load our page analyzer (PA) in the ext4 examples DIR in a browser:
    http://localhost/extjs4/examples/pag...e-analyzer.htm

    * I recommend changing your makerows() count to 10 instead of 40 or it may timeout in PA

    Then load your test case ( not in fiddle, but local ) in the test url.

    Click 'load' button to the right.

    With height set, you will see a layout run, under the viewport you will see all the entries and the calls, timings, etc.
    Then uncomment out the height and click load button again and you will see *many* layout runs ( ~40 ) all duplicates of what you saw in the first setup as it has to refresh all of the items on the screen each time to account for the height changes.

    I understand you have requirements, but I would perhaps look at other options.
    Perhaps set the grid title/sytle if there are no records.

    // added timers and suspended layout for testing
    Code:
    Ext.application({
        name: 'Fiddle',
        launch: function() {
    
            console.time('start');
            Ext.suspendLayouts();
    
            Ext.create('Ext.container.Viewport', {
                xtype: 'container',
                layout: 'vbox',
                items: makeRows(10)
            });
            
            Ext.resumeLayouts(true);
            console.timeEnd('start');
    
        }
    });

  4. #3
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    Are you simply going to display a list of items in the grid and nothing else? If that is the case then you probably don't need a grid. You could instead simply use a boxcomponent with tpl config (template) to render the list within the component. Take a look at this example:

    https://fiddle.sencha.com/#fiddle/136e

    As you can see, this has variable height for each list container and renders very fast.

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Agreed, the grid is very heavy. If you change your example to use container, the time drops down to < 100 vs 1K even with height.

  6. #5
    Sencha User
    Join Date
    Dec 2015
    Posts
    1

    Default

    I was hoping to leverage some of the capabilities of the grid but it looks like the best approach is to use the templating capabilities and re-implement the rest of what we need.

    Thanks for the assistance

Similar Threads

  1. Grid Performance Issue with large columns
    By PankajG in forum Ext: Discussion
    Replies: 2
    Last Post: 8 Dec 2014, 3:30 AM
  2. Performance when drag and drop between 2 large grids
    By oalyman in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 22 Jun 2007, 5:55 AM

Tags for this Thread

Posting Permissions

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