如何降低sencha触摸2列表项的高度

Question

如何降低Sencha touch 2中列表项的高度？我的列表显示了大量的单词名称/值对。由于每个项目都需要额外的高度，所以列表变得太长了。所以我想把每个项目的高度降低到准确的内容高度。我试过这样使用css，但没有成功。有什么帮助吗？

var 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

每个列表项的最小高度为2.6em。因此，您可以减少该高度并添加溢出属性。使用此：

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

在itemTpl中使用Html表不是一个好的做法。使用具有-webkit-boxCS3属性的普通DIV元素。

Answer 2

您可以使用列表的itemHeight配置。http://docs.sencha.com/touch/2-1/#/api/Ext.dataview.List-cfg-itemHeight

除此之外，你还可以使用这样的CSS来控制填充：

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

Answer 3

使用名为的属性

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

即

itemHeight: 40

从组件的JS文件中读取