How to set Sencha Touch List line height

Question

How to set row height in Sencha Touch List object?

I use HTML to format the lines, the lines get taller with a few lines, but how do I set the line height?

Thanks Gerry

Answer 1

To edit the default height of list items, you have two ways to do this:

• Create your own Sencha theme with SASS (the official Sencha way to do this).
• Override the Sencha theme's CSS theme.

In the first case, you need to change the value of the $ global-row-height variable, for example, for example.

$global-row-height: 100px; 

If you want to override the CSS class directly with an additional CSS file, you can do this by adding a new rule like this:

 .x-list .x-list-item { min-height: 100px; } 

If you want to set the list height to a single list, you must set your css class as follows:

 .myList .x-list-item { min-height: 100px; } 

and add cls configuration parameter to your list definition e.g.

 var list = new Ext.List({ cls: 'myList', ... ... }); 

You can also use the itemHeight list configuration property, for example:

 var list = new Ext.List({ itemHeight: 25, //to set row height to 25 pixels ... ... }); 

However, I always suggest studying SASS. It is very easy, and it is really worth learning.

Hope this helps.

Answer 2

Since Sencha Touch 2.1 you can use the itemHeight list configuration property ( more details here ). For information, this is also possible in the NestedList object using the listConfig property.

Answer 3

Use the code below to change the height of a list item in Sencha Touch.

 { xtype: 'list', id: 'myList', //Below two properties to change the default height //default = 47 chaged to 30 below variableHeights: true, itemHeight: 30 , itemTpl: '{title}', data: [ { title: 'Item 1' }, { title: 'Item 2' }, { title: 'Item 3' }, { title: 'Item 4' } ] } 

Answer 4

If someone else is looking for an answer in Sencha Touch 2.4.1, here it is:

 listeners: [ { event: 'painted', order: 'before', fn : function() { // Set the height based on the number of items in the list! var itemCount = this.itemsCount, itemHeight = this.getViewItems()[0].element.getHeight(), // Works! heightOfList = itemCount * itemHeight; this.setHeight(heightOfList); } } ] 

I add a listener for the colorized method inside my list. I'm not sure if that matters if you add a listener to a position before or after, but before you make more sense to me.

I just take the number of items in the list and multiplying it by the actual height of the item in the list item. I assume that all elements of the list have the same height in the final list (this will always be the case for my list).

I tried the same approach with

itemHeight = this.getInnerItems () [0] .element.getHeight () // DOES NOT WORK

but this will not work, because at this point the elements will have a height of 0px.

The code above runs!