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中的示例，其中我修改了宽度配置值：

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

显而易见的警告是，如果您在呈现后随后修改了列表，则组合将不会自动调整大小，您必须找到一种方法来自行调整大小。

Answer 2

使用此代码：

Ext.ux.ResizableComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent: function(){
    Ext.ux.ResizableComboBox.superclass.initComponent.call(this);
    this.on('render', this.resizeToFitContent, this);
},
resizeToFitContent: function(){
 if (!this.elMetrics){
            this.elMetrics = Ext.util.TextMetrics.createInstance(this.getEl());
 }
 var m = this.elMetrics, width = 0, el = this.el, s = this.getSize();
 this.store.each(function (r) {
            var text = r.get(this.displayField);
            width = Math.max(width, m.getWidth(text));
        }, this);
 if (el) {
            width += el.getBorderWidth('lr');
            width += el.getPadding('lr');
        }
 if (this.trigger) {
            width += this.trigger.getWidth();
 }
 s.width = width;
 this.setSize(s);
 this.store.on({
            'datachange': this.resizeToFitContent,
            'add': this.resizeToFitContent,
            'remove': this.resizeToFitContent,
            'load': this.resizeToFitContent,
            'update': this.resizeToFitContent,
            buffer: 10,
            scope: this
 });
    }
});Ext.reg('resizable-combo', Ext.ux.ResizableComboBox);

Answer 3

除了moeskau建议的内容之外，您还可以为组合项使用模板。这将使您能够更改项目的外观。您可以包装文本，添加图像等。

Answer 4

为afterrender事件添加一个监听器，如果列表（下拉的div）设置为auto，则设置宽度。

afterrender: function(combo){                   
                combo.list.setSize('auto', 0);
                combo.innerList.setSize('auto', 0);
            }

我使用afterrender而不是渲染的原因是因为如果你将lazyInit设置为false它将设置列表宽度，所以在afterrender中你覆盖setWidth

Answer 5

我很确定你可以让ExtJs以你想要的方式呈现你需要的任何html项目。

这是Examples/Form/Combos.js文件中的一些代码：

var converted = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    transform:'state',
    width:20, //<-- set this config value!
    forceSelection:true
});

在您用于转换组合的代码中，只需指定ExtJs组合的宽度。

Extjs Ext.ComboBox对现有内容进行自动调整大小

5 个答案: