Extjs Ext.ComboBox автоматически изменяет размер существующего контента

Question

У меня проблема при применении Ext.ComboBox к существующему элементу html select , даже если существующий контент заставляет html выбирать около 20 пикселей (по своему содержанию нестатическая ширина установлен), Ext.ComboBox изменит размер до значения по умолчанию, большого значения ширины. Есть ли способ автоматически изменить размер Ext.ComboBox на основе существующих элементов и не использовать ширину по умолчанию?

Даже если я знаю, какой из лучших инструментов Ext, эта проблема позволит моим коллегам отказаться от Extjs.

Заранее спасибо

Answer 1

Технически вы не можете сделать комбо "auto width" - Ext фактически преобразует <select> в обычный <input> за кулисами, а элементам <input> необходимо указать ширину / размер. Тем не менее, вы можете трюк Ext в определении размера комбо на основе существующего <select>, который должен дать вам тот же конечный результат. Вот пример с демонстрационной страницы Ext комбо , где я изменил значение конфигурации width :

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

добавить слушателя к событию afterrender и установить ширину, если список (выпадающий div) автоматически, например,

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

Причина, по которой я использую afterrender, а не render, состоит в том, что если вы установите для lazyInit значение false, это будет устанавливать ширину списка, поэтому в afterrender вы переопределите этот setWidth

Answer 4

В дополнение к тому, что предлагает bmoeskau, вы можете использовать xtemplate для элементов вашего комбо. Это даст вам возможность изменить внешний вид предмета. Вы можете переносить текст, добавлять изображения и т. Д.

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.