Question

我使用comboBox进行自动完成，我想知道如何调整comboBox列表的大小，以便列表的高度与列表中当前的值数相匹配。

例如，用户在框中键入“62”，自动完成功能进行ajax调用以从数据库中获取与此匹配的值。假设有100个值返回。列表的高度将是maxHeight值（300px），因为列表中的数据多于可以容纳的数据，并且会有一个滚动条。完美。

然后用户在“62”（“623”）之后键入“3”，因此我过滤当前存储（具有100个值）并删除任何与“623”不匹配的值。让我们说这给我们留下了4个条目。

问题是该列表仍在扩展到300px，但只有4个值。显然没有滚动条，但我仍然希望高度缩小以适应数据，就像我从数据库中获取新数据一样（它在加载新商店时有效）。

我做了以下事情：

qe.combo.list.setHeight(qe.combo.maxHeight)                  
if (this.getStore().getCount() * 20 < qe.combo.list.getHeight()){
    qe.combo.list.setHeight(this.getStore().getCount() * 20)
}

除了在一种情况下似乎工作正常。在从comboBox向下打开下拉列表（选择器？）列表的任何页面上，这都很有用。

但是在comboBox可能位于页面底部附近的屏幕上（这使得列表在comboBox上方打开），然后更改列表的高度会从下往上缩短它 - 这意味着如果框是300px并且我将它缩短为80px的4个项目，盒子将正确地为80px但是现在组合框和列表之间将有220px的间隙。那有意义吗？基本上，如果列表位于组合框下方，它会缩短它的速度.....它没有考虑到列表在框之上的事实。

我真的对这一个人感到茫然。任何帮助将不胜感激！

Answer 1

尝试使用combobox的配置属性。

listConfig:{
    maxHeight:  200// number which suits your need for list box height
}

此配置应该考虑到过滤时对动态列表高度的需求。

ExtJS comboBox在过滤商店后调整列表框高度

1 个答案: