Question

如何在Sencha Touch List对象中设置行高？

我正在使用HTML格式化行，行多行高，但如何设置行高？

谢谢，格里

Answer 1

要编辑List元素的默认高度，您有两种方法：

使用SASS创建自己的Sencha主题（官方的Sencha方式）。
覆盖Sencha Touch主题CSS。

在第一种情况下，您只需编辑$ global-row-height变量值，例如。

$global-row-height: 100px;

如果要直接使用其他CSS文件覆盖CSS类，可以像这样添加新规则：

.x-list .x-list-item {
   min-height: 100px;
}

如果要设置单个列表的列表高度，则必须以这种方式设置css类：

.myList .x-list-item {
   min-height: 100px;
}

并将 cls 配置参数添加到列表定义中，如下所示

var list = new Ext.List({
   cls: 'myList',
   ...
   ...
});

您还可以使用列表配置属性 itemHeight ，如下所示：

var list = new Ext.List({
       itemHeight: 25,  //to set row height to 25 pixels
       ...
       ...
    });

但是，我总是建议学习SASS。这真的很容易，值得学习。

希望这有帮助。

Answer 2

自 Sencha Touch 2.1 以来，您可以使用list config属性itemHeight（more info here）。仅供参考，通过使用listConfig属性，也可以在NestedList对象中使用。

Answer 3

使用以下代码更改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

有人仍在寻找Sencha Touch 2.4.1中的答案，来这里：

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

我在 listView 中为绘制的方法添加了一个监听器。我不确定是否重要，如果您将之前的或之后的添加到，而之前的更有意义我

我只是在列表中取项数并将其与列表项元素的实际高度相乘。我假设所有列表项在最终列表中具有相同的高度（我的列表将始终如此）。

我用
尝试了同样的方法

itemHeight = this.getInnerItems（）[0] .element.getHeight（）//不起作用

但这不起作用，因为此时元素的高度为0px。

以上代码有效！

如何设置行高Sencha Touch List

4 个答案: