PDA

View Full Version : [4.0.1] Grid on Panel. Very slow layouting with componentLayout=dock



fguest
26 May 2011, 3:24 AM
If in the panel, with 'componentLayout' by default, place the grid, the process layout is obscenely long. If 'componentLayout' set to 'auto' - then things get a quick (but there are other problems).
The situation modeled in the code below.
In actual practice, the speed is not acceptable (about 5 seconds to create a new tab, and switching between tabs). 'dock-layout' looks at each cell in the grid?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--

Firebug profiling (2 times clicked button 'append-tab'):

with commented "componentLayout:'auto'" (3727.657ms, 74621 calls)
with UNcommented "componentLayout:'auto'" (1902.072ms, 40650 calls)

-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>bug</title>
<link rel="stylesheet" type="text/css"
href="http://dev.sencha.com/deploy/ext-4.0.1/resources/css/ext-all.css"/>
<script type="text/javascript"
src="http://dev.sencha.com/deploy/ext-4.0.1/ext-all-debug.js"></script>
</head>
<body>

<script type="text/javascript">
Ext.onReady(function() {

var store = Ext.create("Ext.data.Store", {
fields: [
{name: 'id'},
{name: 'f1'},
{name: 'f2'},
{name: 'f3'},
{name: 'f4'},
{name: 'f5'},
{name: 'f6'}
]
});

for (var i = 0; i < 80; i++) {
store.add({id:i,f1:'f1-' + i,f2:'f2-' + i,f3:'f3-' + i,f4:'f4-' + i,f5:'f5-' + i,f6:'f6-' + i});
}

var renderer1 = function(v, m, r) {
return v + '<div class="class1">|' + v + '</div><img scr="im111.png">';
};

var centerPane = Ext.create('Ext.tab.Panel', {
region: 'center',
tbar: [
{text:'append-tab',handler: function() {
var grid = Ext.create("Ext.grid.Panel", {
store: store,
columns: [
{dataIndex: 'id', text:'Id', flex: 1},
{dataIndex: 'f1', text:'F1', renderer: renderer1},
{dataIndex: 'f2', text:'F2', renderer: renderer1},
{dataIndex: 'f3', text:'F3', renderer: renderer1},
{dataIndex: 'f4', text:'F4', renderer: renderer1},
{dataIndex: 'f5', text:'F5', renderer: renderer1},
{dataIndex: 'f6', text:'F6', renderer: renderer1}
]
});

var gridContainer = Ext.create('Ext.panel.Panel', {

//!!! UNCOMMENT THIS FOR TO IMPROVE PERFORMANCE !!!
//componentLayout:'auto',

border: false,
items: [
grid
]
});

var tabContainer = Ext.create('Ext.panel.Panel', {
autoScroll: true,
bodyPadding: 20,
items: [
gridContainer
]
});

centerPane.add(tabContainer);
centerPane.setActiveTab(tabContainer);
}}
]
});

var viewport1 = Ext.create('Ext.Viewport', {
layout: 'border',
items: [
centerPane,
Ext.create('Ext.Panel', {width:200,region:'west'}),
Ext.create('Ext.Panel', {height:70,region:'south'}),
Ext.create('Ext.Panel', {height:70,region:'north', html:
'Press "append-tab" several times... Then uncomment the line ' +
'"//componentLayout:\'auto\'" and try again. Speed greatly improved!'
})
]
});

});
</script>
</body>
</html>

hyteckit
28 May 2011, 4:48 AM
I was running into issues with the Grid on 4.0.1 as well. It worked fine under 3.2.1.


I'm using the checkbox selection model in the grid.
My grid has less than 50 records. Click on the checkbox to select all the records is instantaneous under 3.2.1. Takes over 5 seconds under 4.0.1!! Totally not acceptable on a grid with less than 50 records.


Tried what you suggested by adding:


"componentLayout:'auto'

Big improvement in speed just by adding the config in. It cuts it down from over 5 seconds to half a second. Although still slower than under 3.2.1.



Performing just clicking on select all checkbox for the grid.

Under 4.0.1

Firebug seems to show it's spending most of its time on 'getViewSize'.


with "componentLayout:'auto'":


getViewSize 42 65.48% 505.864ms

without "componentLayout:'auto'":

Profile (2503.671ms, 86152 calls)

getViewSize 378 68.77% 1786.464ms


Under 3.2.1

The whole process is around 26 ms.

Profile (26.097ms, 3746 calls)


Big difference in number of calls between 4.0.1. and 3.2.1 from just click on the select all checkbox.

rich02818
28 May 2011, 5:46 AM
@hyteckit, that is really useful info. There has to be some architectural issues in 4.x causing function call thrashing to consume so much time. Could you possibly post the test code so that this can be repeated?

hyteckit
28 May 2011, 5:48 AM
Same data and same grid under 4.0.1

Instead of rendering it to a panel, it's being render to the body.

Clicking on select all checkbox.

Profile (55.065ms, 13401 calls)


Compared that to placing the grid within a panel.

Profile (2503.671ms, 86152 calls)


Wow, what a difference. The getViewSize function doesn't seem to be called when it's being rendered to the body.

Yes, I understand a gridPanel is already a panel.

hyteckit
28 May 2011, 5:53 AM
getViewSize is being called unnecessarily.

Click on the checkbox selection model doesn't require any components to be resized, so I don't know why getViewSize even needs to be called.

hyteckit
28 May 2011, 6:00 AM
@hyteckit, that is really useful info. There has to be some architectural issues in 4.x causing function call thrashing to consume so much time. Could you possibly post the test code so that this can be repeated?

I'm just following the FeedViewer example for the layout for the most part.

The checkbox selection model test.

under 4.0.1: 1083.77ms, 38510 calls
under 3.2.1: 19.851ms, 1823 calls

4.0.1 takes 55 times longer than 3.2.1 just for the simple checkbox selection test. 21 times more function calls.


Under 4.0.1

Add the following to the FeedGrid.js file.


selModel: Ext.create('Ext.selection.CheckboxModel'),

Use firebug to profile clicking on the select all checkbox.

Profile (1083.77ms, 38510 calls)


getViewSize 168 67.38% 730.25ms





Under 3.2.1

Add the following to the FeedGrid.js file



this.sm = new Ext.grid.CheckboxSelectionModel();
this.columns = [this.sm, {
.
.
.

/*
sm: new Ext.grid.RowSelectionModel({
singleSelect:true
}),
*/


Same selection model click test


Profile (19.851ms, 1823 calls)

hyteckit
28 May 2011, 12:59 PM
Hmm... maybe it's my fault for using the FeedViewer example as the basis of my test.

Anyway, after I commented out:



onSelect: function(grid, rec) {
//this.display.setActive(rec);
},


the checkbox selection model is fast again. Issue was with my event listeners and event handlers.

Ran the firebug profiler after the change above. Much better results.

Profile (47.835ms, 10605 calls)

rich02818
28 May 2011, 1:26 PM
Was this event handler not invoked when running with 3.2.1 ?


Hmm... maybe it's my fault for using the FeedViewer example as the basis of my test.

Anyway, after I commented out:



onSelect: function(grid, rec) {
//this.display.setActive(rec);
},


the checkbox selection model is fast again. Issue was with my event listeners and event handlers.

Ran the firebug profiler after the change above. Much better results.

Profile (47.835ms, 10605 calls)

hyteckit
28 May 2011, 4:30 PM
Was this event handler not invoked when running with 3.2.1 ?

Different events under 4.0.1 and 3.2.1.


Ran some test under 4.0.1 and 3.2.1 which clicking on the select all checkout.

Under 4.0.1:

'itemclick' or 'selectionchange' event is fired for every single row in the grid. So if I have 50 records, the event is fired 50 times when I click on the select all checkbox.

Under 3.2.1:

'rowselect' event is only fired once no matter how many records there are. So even if I have 50 records, only 1 'rowselect' event is fired when I click on the select all checkbox.

hyteckit
28 May 2011, 5:32 PM
Anyway, I fixed my issue.

Sorry to the original poster for accidentally hijacking the thread. Thought it was the same issue, but turns out to be a different issue.

aconran
1 Jun 2011, 6:37 AM
We are looking into dock layout and grid panel interaction. Thanks for the testcase and metrics.

Animal
1 Jun 2011, 3:16 PM
We've been stepping through the layout code today. There were some very complex interactions between dock layout (which is a Component layout) and the container layout being used. Dock layout has some of the attributes of a Container layout. If it is autosizing its Panel, it obviously has to perform a container layout (to force render and layout of child items) to ascertain its required size. When it's done that, the Component layout base class by default performs a Container layout after it's finished. So in this case, there were two Container layouts being performed for every call to Dock layout instead of only one.

And also the upwards flow of control when a descendant Component has its size set (by its Component layout) was causing issues.

When a descendant Component has its Component layout run (which will happen on first render and on resize), it informs its owning Container which may need to change size and re layout all other children in response.

But that child which is making that upwards call should not be included in that re-layout process otherwise it will recurse. We had to add a check for that.

Both these two problems were in play. Problem 1 was multiplying that recursion problem by two! Performance when nested like that should be comparable with performance of a naked grid rendered right into the document.

There are several other performance and accuracy issue with grid we are fixing. Particularly calculation of when horizontal and vertical scrollbars should be shown or not. That will be much faster and more accurate in the forthcoming version.