How to set row height Sencha Touch List - list

Question

How can I set the row height in a Sencha Touch List object?
I'm using HTML to format the row, rows get taller with multiple lines, but how do I set the row height?
Thanks,
Gerry

Answer 1

To edit the List elements default height, you have two ways to do it:
Create your own Sencha Theme with SASS (The official Sencha way to do it).
Override the Sencha Touch Theme CSS.
In the first case you only need to edit the $global-row-height variable value like, for example.
$global-row-height: 100px;
If you want to override the CSS class directly with an additional CSS file, you can do it adding a new rule just like this:
.x-list .x-list-item {
min-height: 100px;
}
If you want to set the list Height of a single list you have to set your css class in this way:
.myList .x-list-item {
min-height: 100px;
}
and add the cls config param to your list definition like this
var list = new Ext.List({
cls: 'myList',
...
...
});
You can also use the list config property itemHeight,like this:
var list = new Ext.List({
itemHeight: 25, //to set row height to 25 pixels
...
...
});
However, I always suggest to learn SASS. It's really easy and it really worth learning.
Hope this helps.

Answer 2

Since Sencha Touch 2.1 you can use list config property itemHeight (more info here). Just for information, it's also possible in NestedList object by using listConfig property.

Answer 3

Use the below code to change the height of 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

Incase somebody is still looking for the answer in Sencha Touch 2.4.1, here it comes:
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 am adding a listener for the painted method inside of my listView. I'm not sure if it matters, if you add the listener at the position of before, or after, but before made more sense to me.
I am simply taking the count of items in the list and multiplying it with the actual height of a list item element. I assume that all list items 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 that wouldn't work, because the elements would have a height of 0px at this points.
The code above works!