如何设置行高Sencha触摸列表

如何解决如何设置行高Sencha触摸列表

| 如何在Sencha触摸列表对象中设置行高？我正在使用HTML格式化行，行变得多行高，但是如何设置行高？谢谢，格里

解决方法

要编辑“列表”元素的默认高度，可以通过两种方法进行：使用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参数添加到您的列表定义中，如下所示

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

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

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

但是，我总是建议学习SASS。这真的很简单，值得学习。希望这可以帮助。 , 从Sencha Touch 2.1开始，您可以使用列表配置属性itemHeight（此处有更多信息）。仅供参考，也可以使用listConfig属性在NestedList对象中使用。 , 使用以下代码更改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\' } 
         ] 
}

, 如果有人仍在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触摸列表

如何解决如何设置行高Sencha触摸列表

解决方法

相关推荐