PDA

View Full Version : Performance issue during layout of large number of grids with empty text specified



gthaker
30 Dec 2015, 10:51 AM
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.

scottmartin
30 Dec 2015, 2:05 PM
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/page-analyzer/page-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


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');

}
});

jdkhamba
30 Dec 2015, 2:13 PM
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.

scottmartin
30 Dec 2015, 2:16 PM
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.

gthaker
4 Jan 2016, 8:30 AM
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