且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何设置行高Sencha触摸列表

更新时间:2023-01-25 08:16:02

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

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.

希望这会有所帮助.