How to reduce sencha touch 2 list item height

Question

How to reduce the height of list item in Sencha touch 2? My list showing large numbers of single word name/value pair. As each item taking extra height, list is becoming too long. So i want to reduce each item height to exact content height. I tried using css like this but no luck. Any help?

var tabPanel=Ext.create('Ext.TabPanel', {

fullscreen: true,
    tabBarPosition: 'top',
defaults: {
      styleHtmlContent: true
    },

    items: [
    {
        title: 'DETAILS', 
    xtype: 'list',
        cls: 'myList',
        ....
        itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
    .............



.myList .x-list-item {
       max-height: 30px;
}

Answer 1

Each list item has a min-height of 2.6em. So, you can reduce that and add a overflow property. Use this:

.my-list .x-list-item .x-list-item-label{
     min-height: 0.8em !important;
     overflow : auto;
}

And it is not a good practice to use Html tables inside itemTpl. Use plain DIV elements with -webkit-box CSS3 property.

Answer 2

You can use itemHeight config of list. http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight

in addition to that you can also use CSS like this to control padding:

.my-list .x-list-item  .x-list-item-body{
     min-height: 0.5em !important;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
}

Answer 3

use a property called as

itemHeight: [*Height of the item you need*],

i.e

itemHeight: 40

Read it from the Component's JS file