如何设置行高 Sencha Touch List答案

【问题标题】：How to set row height Sencha Touch List如何设置行高 Sencha Touch List
【发布时间】：2011-05-31 23:53:36
【问题描述】：

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

我正在使用 HTML 来格式化行，多行时行会变高，但是如何设置行高？

谢谢，格里

【问题讨论】：

标签： list sencha-touch

【解决方案1】：

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

使用 SASS 创建您自己的煎茶主题（官方煎茶方式）。
覆盖 Sencha Touch Theme 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。非常简单，非常值得学习。

希望这会有所帮助。

【讨论】：

我的 CSS 有点弱。我有超过 1 个列表，所以如果我想更改其中一个的高度，我会用我的列表类 id 替换 .x-list？
Andrea，如果我使用 .myList 为一个列表设置样式，“myList”是使用 Sencha Touch 的 cls 属性还是 id 属性？
Gerry，“myList”是 cls 属性 :)

【解决方案2】：

从Sencha Touch 2.1开始，您可以使用列表配置属性itemHeight (more info here)。仅供参考，也可以在 NestedList 对象中使用listConfig 属性。

【讨论】：

这在 Sencha 方面是个非常糟糕的主意，他们使用 -webkit-transform: translate3d(....);在每个单独的列表项样式属性中，如果您想拥有纯 CSS 样式、支持不同的分辨率等，就很难覆盖......

【解决方案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' } 
         ] 
}

【讨论】：

【解决方案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 中的 painted 方法添加一个侦听器。我不确定这是否重要，如果您将侦听器添加到 before 或 after 的位置，但 before 更有意义我。

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

我尝试了同样的方法

itemHeight = this.getInnerItems()[0].element.getHeight() // 不起作用

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

上面的代码有效！

【讨论】：