Wednesday, June 29, 2016

Hamza and I have been working on #977.

The GridPanel.computePageSize() method

In Lino, a grid panel tries to request exactly as many rows of data as it can display within the space it is filling.

In ExtJS 3 we had a trick to compute the exact height of a row, but that trick fails with ExtJS 6. We want to know the number of grid rows that will fit into the grid before actually requesting any data from the server. The store is not yet loaded. We don’t want the height of every data row. The trick is to create a volatile DOM element with the same CSS as a grid cell and with <br/> as content. And instead of displaying this element, we just note its height.

The following was interesting as well: http://www.extjs-tutorial.com/extjs/working-with-dom

The total inner height of the panel (i.e. the number of pixels available for all rows) seems to be grid.Panel.getViewRegion.

Here is an interesting thread: how to get height of a row from gridview extjs 4?

Until now I did not find a perfect solution. As a workaround I use a hard-coded value for the height of a row.

Hamza, I commit my last working version so that you can continue on it if you want.

A second commit (0b3728d..2bf6799) with a solution which looks satisfying to me, so I would say that the hack which creates a fake grid row from the two templates is not necessary.

The cool new trick (and the thing I had to learn) was how to get the correct total available height of the grid widget. My first approach was this:

var height = this.getViewRegion().getSize().height;

But it seems that this one is the best:

var gb = this.body.selectNode('.x-grid-view', false);
var height = gb.getHeight();

I used the browser’s inspector to find out that I must query for the x-grid-view element of the grid.

I also needed to write and play with the following sandbox showcase.

A sandbox showcase

I opened #999 and added a first example of a “showcase”. The example itself is taken from extjs-tutorial.com.

This first showcase helped me to understand that Ext.get() retrieves an Ext.Element object which wraps a DOM element of the document (or null if no matching element was found).

This kind of showcase snippets can be interesting when trying to debug some tough Javascript problem. The basic approach is the same as it was in the showcases I wrote back in 2010 when I discovered ExtJS 3.