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.