PDA

View Full Version : Using native browser scroll bar for grids



yujiayan
19 May 2011, 6:00 AM
Hi,

After rewriting a ExtJs 3 grid in 4, I have been experiencing a noticeable slowness when reloading the store and the grid content. Especially when the number of rows exceed the hight of the grid body, there are a couple of seconds after the reload that the grid is frozen, until the scroll bar shows up. This is more so when view it in IE7.

Chrome profiler shows several function calls each add 30+ ms latency and they all seem to come from the same set of methods, so I looked into the source code of Ext.panel.Table, and saw the following lines:


// Set our determinScrollbars method to reference a buffered call to determinScrollbars which fires on a 30ms buffer.
me.determineScrollbars = Ext.Function.createBuffered(me.determineScrollbars, 30);
me.injectView = Ext.Function.createBuffered(me.injectView, 30);

Each time determineScrollbars and injectView is called, a 30 ms delay is added. When the grid is placed many levels deep, this delay is added several times. It is further proved by another thread in the forum: http://www.sencha.com/forum/showthread.php?132618-Grid-determineScrollbars-performance-degradation&p=600117

I understand the necessity of adding the 30 ms buffer in the process of creating the customized scroll bar, but wasn't very sure if it is absolutely necessary to replace the browser scroll bar if it is just expected to provide the same function.

Is there any way to disable the script scroll bar for a specific grid and fall back to the native browser scroll bar?

Thanks

jsakalos
19 May 2011, 1:36 PM
I haven't found anything in docs that could indicate a possibility to use the default scrollbar but to be sure you can send an e-mail directly to sencha so that developers can explain the rationale behind this design decision.

yujiayan
23 May 2011, 6:16 AM
Thanks Saki! I have emailed sencha support team

jsakalos
23 May 2011, 1:43 PM
Inform us when they reply please.

frankiew
26 May 2011, 6:49 AM
I have the same issue. when i put the grid inside some nested layout, card->border->card, whenever the grid load from sever, the browser frozen until until the scrollbar show up. and sometimes browser give unresponsive script error. it happens in IE8 and ff3.6.7. however it works fine in chrome.

jsakalos
26 May 2011, 11:16 PM
Can you post a runnable simple showcase (http://www.sencha.com/learn/Ext_Forum_Help#Posting_a_working_showcase) please so that we can find out what's happening and either to advise a workaround or file it as a bug?

yujiayan
31 May 2011, 6:11 AM
Hi Saki,

I put together a simple showcase to illustrate 2 issues related to grid and scroll bars. The page should be launched under Ext examples directory. Tested on my side with 4.0.0 and 4.0.1

Please let me know if there are any problems with the demo page.

Thanks!




<html>
<head>
<title>Scroll Bar Issues Example</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.require(['Ext.grid.*','Ext.data.*']);

function loadData(size) {
var data = [];
for (var i=0;i<size;i++)
data[i] = [
'Company ' + i,
Math.round(Math.random()*10000)/100
];
return data;
}

var smallData = loadData(15),
midData = loadData(22),
bigData = loadData(500);

// create the data store
var storecfg = {
big: true,
fields: [ 'company', 'price']
};

var store = Ext.create('Ext.data.ArrayStore', storecfg);

// create the Grid
var grid = {
region: 'center',
xtype: 'grid',
store: store,
tbar: [{
text: 'switch data size',
handler: function() {
store.loadData(store.big ? bigData : smallData);
store.big = !store.big;
}
}, {
text: 'load mid size data',
handler: function() {
store.loadData(midData);
store.big = true;
}
}],
columns: [{
text : 'Company',
flex : 1,
dataIndex: 'company'
},{
text : 'Price',
width : 75,
dataIndex: 'price'
}]
};

var container = Ext.create('Ext.panel.Panel', {
renderTo: 'grid-example',
height: 600,
width: 800,
layout: 'border',
items: [grid, {
title: 'Collapsible Panel',
region: 'south',
collapsible: true,
height: 150,
html: 'ISSUE #1. click "switch data size" several times, notice the delay in showing and hiding the scroll bar. (esp. in IE)<br/>ISSUE #2. click "load mid size data", and collapse this panel with the top-right button, notice the scroll bar space is not given to the grid'
}]
});

});
</script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>

jsakalos
31 May 2011, 1:33 PM
Yes, I can confirm both issues. 1) The delay is observable also in [email protected], although I's say it is still in an acceptable timeframe. 2) It really looks odd, that blue space that used to be the scrollbar.

Moving this thread to Bugs.

BTW: Perfect showcase! I've dropped it into examples and it just works and cleanly shows the issues. Very well done!

aconran
1 Jun 2011, 6:20 AM
Ext 4.0.2 will use Ext.Function.createThrottled instead of createBuffered and has implemented optimizations to add the scrollbars in a single pass.

We are also exploring using native scrollbars on the view when feasible.

yujiayan
1 Jun 2011, 7:21 AM
thanks Aaron, and thanks Saki!

I am looking forward to the new release

mankz
1 Jun 2011, 8:58 AM
Ext 4.0.2 will use Ext.Function.createThrottled instead of createBuffered and has implemented optimizations to add the scrollbars in a single pass.

We are also exploring using native scrollbars on the view when feasible.

This sounds like the best approach I've heard so far. Native scrollers for simple scenarios, and "virtual" scrollbars for the rest :)

albertyips
7 Aug 2011, 6:20 PM
We are running into a similar issues with our grids. Is this fixed i 4.0.2a or as part of 4.0.5.

Albert

Animal
8 Aug 2011, 1:30 AM
I thought this had been well flagged.

Grid scrolling is native in 4.1.0

The <table> element is simply allowed to overflow the DataView's encapsulating element, and browser scrollbars appear.

There are no extra docked Components. The only docked Components will be the header (if a title specified, and not in a TabPanel), the column header container, and any toolbars.