如何设置行高Sencha触摸列表 [英] How to set row height Sencha Touch List

问题描述

如何设置Sencha触摸列表对象中的行高?

How can I set the row height in a Sencha Touch List object?

我正在使用HTML格式化行，行变得多行，但是如何设置行高?

I'm using HTML to format the row, rows get taller with multiple lines, but how do I set the row height?

谢谢， 格里

推荐答案

要编辑列表"元素的默认高度，您有两种方法可以做到:

To edit the List elements default height, you have two ways to do it:

• 使用SASS创建自己的Sencha主题(Sencha的官方方法).
• 覆盖Sencha Touch主题CSS.

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

In the first case you only need to edit the $global-row-height variable value like, for example.

$global-row-height: 100px;

如果要使用其他CSS文件直接覆盖CSS类，则可以添加新规则，如下所示:

If you want to override the CSS class directly with an additional CSS file, you can do it adding a new rule just like this:

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

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

If you want to set the list Height of a single list you have to set your css class in this way:

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

像这样将 cls 配置参数添加到您的列表定义中

and add the cls config param to your list definition like this

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

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

You can also use the list config property itemHeight,like this:

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

但是，我总是建议学习SASS.这真的很简单，值得学习.

However, I always suggest to learn SASS. It's really easy and it really worth learning.

希望这会有所帮助.

这篇关于如何设置行高Sencha触摸列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！