1

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

3 回答 3

1

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

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

而且在里面使用 Html 表格也不是一个好习惯itemTpl。使用带有-webkit-boxCSS3 属性的普通 DIV 元素。

于 2012-09-01T09:26:58.633 回答
0

您可以使用列表的 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;
}
于 2012-12-27T06:54:40.027 回答
0

使用一个名为 as

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

IE

itemHeight: 40

从组件的 JS 文件中读取

于 2014-04-23T08:14:34.673 回答