javascript - Extjs Ext.ComboBox 自动调整现有内容的大小

Question

在现有的 html select 项目上应用 Ext.ComboBox 时，我遇到了问题，即使现有内容使 html 选择大约 20px(因为它的内容非设置了静态宽度)，Ext.ComboBox 将调整大小为某种默认的大宽度值。有没有一种方法可以根据现有项目自动调整 Ext.ComboBox 的大小，而不使用默认宽度？

即使我知道 Ext 是哪个最好的工具，这个问题也会让我的同事放弃 Extjs。

提前致谢

Answer 1

从技术上讲，您无法制作“自动宽度”组合 - Ext 实际上转换 <select>变成常规<input>幕后，和 <input>元素必须指定宽度/大小。但是，您可以欺骗 Ext 根据现有的 <select> 来调整组合的大小。这应该会给你相同的最终结果。这是来自 Ext combo demo page 的示例，我修改了 width 配置值:

var converted = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    transform:'state',
    width: Ext.fly('state').getWidth(),
    forceSelection:true
});

明显的警告是，如果您在渲染后随后修改列表，组合将不会自动调整自身大小，您必须找到一种方法来自行调整其大小。