如何设置行高Sencha Touch List

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 config param 添加到列表定义中,如下所示

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

您还可以使用list config属性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(此处有更多信息).仅供参考,通过使用listConfig属性,也可以在NestedList对象中使用.