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

【问题标题】：ExtJS comboBox resize list box height after filtering the storeExtJS comboBox 过滤商店后调整列表框高度
【发布时间】：2017-04-12 22:18:52
【问题描述】：

我将组合框用于自动完成目的，我想知道如何调整组合框列表的大小，以使列表的高度与列表中当前值的数量相匹配。

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

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

问题是列表仍在扩展为 300 像素，但其中只有 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)
}

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

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

我真的对这个家伙不知所措。任何帮助将不胜感激！

【问题讨论】：

您使用哪个版本的 Ext JS？ AFAIK Ext JS 以这种开箱即用的方式工作。参见示例：jsfiddle.net/NYSFN
我们使用的是 ExtJS 3.4，不能升级。
我的例子是基于 3.4，所以它应该也适合你。
您发布的样本与我的不同之处在于您使用的是本地商店，而我的需要“远程”。我们有 10,000 个可以输入的值（数字 0001 到 9999），因此预先加载整个列表有点费力，我们宁愿不这样做。相反，我想在用户第一次击键时加载商店，只加载相关数据（例如，如果用户键入“2”，那么只会加载数字 2000 到 2999）。但是在它加载这些数据之后，我希望它在存在的值中过滤自身（就像它是本地模式一样）。想法？
我想补充一点，我上面描述的内容是在 beforeQuery 监听器中完成的，就功能而言，我们让它正常工作。意思是，用户输入一个数字，商店检索匹配的值，并且在随后的击键时，商店正确地过滤了自己。我们面临的问题是列表框高度不会重新调整到存在的数据量。如果列表最初有 100 个值，则高度将为 maxHeight 值 (300px)。但进一步过滤，只剩下 5 个值，列表高度保持 300 像素（这意味着 15 个“空白”值）。

标签： list extjs autocomplete combobox resize

【解决方案1】：

尝试使用组合框的配置属性。

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

此配置应满足您在过滤时对动态列表高度的需求。

【讨论】：