How to set row height Sencha Touch 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!