Extjs Ext.ComboBox自动缩放现有内容 [英] Extjs Ext.ComboBox autosize over existing content

问题描述

在现有 html选择项目中应用 Ext.ComboBox 时，我有问题，即使现有内容使html选择约20px（由内容非静态宽度设置），Ext.ComboBox将重新调整为一种默认值，大的宽度值。
有一种方法可以根据现有项目自动调整Ext.ComboBox的大小，而不使用默认宽度？

I have a problem when apply an Ext.ComboBox over an existing html select item, even if the existing content makes the html select about 20px (by it's content non static width is set), the Ext.ComboBox will resize to a sort of default, large, width value. There's a way to auto resize the Ext.ComboBox based on the existing items and no using the default width?

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

Even if I know which best tool Ext is, this issue will let my colleagues to discard Extjs.

提前感谢

推荐答案

您不能在技术上使组合自动宽度 - Ext实际上将< select> 转换为常规输入> 后台，< input> 元素必须具有指定的宽度/大小。但是，您可以根据现有的< select> 扩展大小调整组合，这应该给您最终的结果。以下是来自Ext 组合演示页面的示例，其中有修改 width 配置值：

You can't technically make a combo "auto width" -- Ext actually converts the <select> into a regular <input> behind the scenes, and <input> elements have to have a width/size specified. However, you can trick Ext into sizing the combo based on the existing <select> which should give you the same end result. Here's an example from the Ext combo demo page, where I have modified the width config value:

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

明显的警告是，如果随后在渲染后修改列表，则组合不会调整大小自己自己，你必须找出一种自己调整大小的方法。

The obvious caveat would be that if you subsequently modify the list after it's rendered, the combo will not resize itself automatically and you'd have to figure out a way to resize it yourself.

这篇关于Extjs Ext.ComboBox自动缩放现有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！