Sencha touch 如何降低sencha touch 2列表项高度

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

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;
}

全屏显示：真，
Tabbar位置：“顶部”，
默认值：{
styleHtmlContent：true
},
项目：[
{
标题:"详情",，
xtype:'列表'，
cls:“myList”，
....
itemTpl:“{fieldName}{fieldValue}”，
.............
.myList.x-list-item{
最大高度：30px；
}

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

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

---

在

itemTpl

中使用Html表不是一个好的做法。请使用带有

-webkit-box

CSS3属性的普通DIV元素。

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

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

---

在

itemTpl

中使用Html表不是一个好的做法。使用带有

-webkit-box

CSS3属性的普通DIV元素。

您可以使用列表的itemHeight配置

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

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

---

您可以使用列表的itemHeight配置

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

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

---

使用名为

itemHeight:[*所需物品的高度*]，

i、 e

---

从组件的JS文件读取它

使用名为

itemHeight:[*所需物品的高度*]，

i、 e

---

从组件的JS文件中读取它

您还可以检查此相关问题：您还可以检查此相关问题：