[CLOSED] Set ListView height to N rows

[randy85253]

I would like to be able to set the height of a ListView to N rows high. I can calculate the height of a text row with TextMetrics using the ListView's el, but it seems the ListView is adding some margins or padding between the rows that TextMetrics does not account for.

Does ListView add its own padding/margins between rows, and if so, how can I get these values?

[Vladimir]

Hi,

Can you provide your code to detect row height and set ListView height?


I was able to detect row height using the following code

Ext.fly(ListView1.getNode(0)).getHeight()

Also it is need calculate header height and add it to the required height

Ext.fly(ListView1.el.dom.firstChild).getHeight()

[randy85253]

You example assumes it has data. I am trying to set it to N rows high even if its empty (I use it as a edit field, and it will get filled)

I am TextMetrics like this to get the height of a text row.

var tm = Ext.util.TextMetrics.createInstance(listView.el);


var th = tm.getHeight("X");

[Vladimir]

Hi,

It is very strange that you try to detect row height without data. Height can be variuous depends from row content
I think it is better to calculate required height after data loading (for example, in the Load listener of the Store with small delay)


P.S. each cell in the ListView row has 'padding: 3px 4px' (your text metrics doesn't take into account that padding)
You can get it dynamically

ListView1.el.select('dl dt em').first().getPadding('tb')

But again it is possible if data is loaded


Or try to use Ext.util.CSS
- get padding

Ext.util.CSS.getRule('.x-list-body
 dt em', true).style.padding

- get top padding

Ext.util.CSS.getRule('.x-list-body
 dt em', true).style.paddingTop

- get bottom padding

Ext.util.CSS.getRule('.x-list-body
 dt em', true).style.paddingBottom

[randy85253]

Vladimir;

Thanks, this looks like what I need.