问题描述
|
如何在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。
上面的代码有效!