PDA

View Full Version : paging toolbar causes extra layout flush of grid



acteon
5 Jul 2013, 1:48 AM
Hi,

We are having some performance problems in UI part of the application which runs on a Java(spring+hibernate+spring MVC+DB2).

After server side bottleneck issues are solved UI performance began to surface. I am using page analyzer tool to see whether extra layouts are cause performance issues. I have obtained a result as below :
44729

and when pagingtoolbar is removed grid is properly rendered once (layout flushed once).

Question : Is there any way to using paging toolbar without causing extra layout flush.

slemmon
11 Jul 2013, 8:17 AM
When I analyze a grid with paging toolbar example versus just a grid the layout counts are the same - until I load the store. Loading the store causes another layout when the displayItems is re-rendered. That what you're seeing, too?

acteon
15 Jul 2013, 6:21 AM
I tried the example without loading the store. It looks you are right loading store causes a second layout.

Another curious thing is that when refresh button used again it does the same thing and does 2 layouts.

In other words any store load causes grid to layout twice which seems wrong to me because as I understand from sencha's layout logic they all should be flushed in 1 cycle (rows+ general grid frame)

if I remove paging toolbar and add my own toolbar with refresh button(where store reload function is called) when refresh button is clicked this time it does only 1 layout

acteon
15 Jul 2013, 10:43 PM
here are some other informations :

- Extjs 4.1.1 is the version that is being used,

- Javascript profiling information (firefox) indicates following functions used heavily :

* setWidth : ext-all-debug.js 16727
* getStyle : ext-all-debug.js 12167
* getHeight : ext-all-debug.js 16647
* invoke : ext-all-debug.js 17326

raw profile info :



anonymous
54270
16.91%
638.967ms
1111.087ms
0.02ms
0.012ms
1.464ms
ext-all-debug.js (line 16727)




anonymous
1961
10.66%
402.633ms
403.083ms
0.206ms
0.008ms
84.822ms
ext-all-debug.js (line 12168)




anonymous
962
7.76%
293.181ms
681.904ms
0.709ms
0.015ms
280.609ms
ext-all-debug.js (line 16648)




anonymous
270
4.99%
188.715ms
1420.741ms
5.262ms
3.853ms
15.534ms
ext-all-debug.js (line 17326)




anonymous
54478
3.92%
148.124ms
193.277ms
0.004ms
0.003ms
0.094ms
ext-all-debug.js (line 13969)




anonymous
3932
2.8%
105.773ms
138.718ms
0.035ms
0.002ms
0.244ms
ext-all-debug.js (line 12253)




anonymous
472
2.71%
102.28ms
113.875ms
0.241ms
0.134ms
0.468ms
ext-all-debug.js (line 13599)




anonymous
54360
2.4%
90.739ms
90.739ms
0.002ms
0.001ms
0.13ms
ext-all-debug.js (line 14010)




anonymous
54270
2.08%
78.429ms
120.939ms
0.002ms
0.001ms
0.122ms
ext-all-debug.js (line 17285)




anonymous
54271
2.01%
76.109ms
166.554ms
0.003ms
0.002ms
0.182ms
ext-all-debug.js (line 16832)




anonymous
54470
1.94%
73.398ms
107.615ms
0.002ms
0.001ms
0.134ms
ext-all-debug.js (line 17291)




anonymous
271
1.64%
61.806ms
169.7ms
0.626ms
0.559ms
0.909ms
ext-all-debug.js (line 17301)




anonymous
7577
1.37%
51.828ms
94.82ms
0.013ms
0ms
0.248ms
ext-all-debug.js (line 23915)




anonymous
56074
1.24%
46.95ms
46.95ms
0.001ms
0ms
0.038ms
ext-all-debug.js (line 11085)




anonymous
200
1.21%
45.578ms
56.851ms
0.284ms
0.252ms
0.809ms
ext-all-debug.js (line 486)

acteon
15 Jul 2013, 11:36 PM
More info (sorry for the dispersed information but I was busy with some other things) :

When I override as follows and disable updateInfo & setValue of afterTextItem layout is done only once. It seems to me that there is a problem with toolbartextitem since when I had tried to write my own paging toolbar until I added a textitem everything was fine. After I had added a textitem again it did 2 layouts.



Ext.toolbar.Paging.override({onLoad : function(){
var me = this,
pageData,
currPage,
pageCount,
afterText,
count,
isEmpty;


count = me.store.getCount();
isEmpty = count === 0;
if (!isEmpty) {
pageData = me.getPageData();
currPage = pageData.currentPage;
pageCount = pageData.pageCount;
afterText = Ext.String.format(me.afterPageText, (isNaN(pageCount) || (pageCount === 0)) ? 1 : pageCount);
} else {
currPage = 0;
pageCount = 0;
afterText = Ext.String.format(me.afterPageText, 1);
}


Ext.suspendLayouts();
//me.child('#afterTextItem').setText(afterText);
me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
me.child('#first').setDisabled(currPage === 1 || isEmpty);
me.child('#prev').setDisabled(currPage === 1 || isEmpty);
me.child('#next').setDisabled(currPage === pageCount || isEmpty);
me.child('#last').setDisabled(currPage === pageCount || isEmpty);
me.child('#refresh').enable();
//me.updateInfo();
Ext.resumeLayouts(false);


if (me.rendered) {
me.fireEvent('change', me, pageData);
}
}
});