Измените размер Ext.form.ComboBox, чтобы он соответствовал его содержимому

На форумах Ext довольно мало решений, но мне не удалось заставить ни одно из них работать. Кажется, я упускаю что-то незначительное.

Мне нужно изменить размер поля со списком, чтобы оно соответствовало его содержимому при первом создании. Мне не нужно беспокоиться об изменении его размера при изменении содержимого.

Есть ли рабочие примеры с использованием Extjs 3.2?

Текущий код:

var store = new Ext.data.ArrayStore({
    fields: ['view', 'value', 'defaultselect'],
    data: Ext.configdata.dataCP
});

comboCPU = new Ext.form.ComboBox({
    tpl: '<tpl for="."><div class="x-combo-list-item"><b>{view}</b><br /></div></tpl>',
    store: store,
    displayField: 'view',
    width: 600,
    typeAhead: true,
    forceSelection: true,
    mode: 'local',
    triggerAction: 'all',
    editable: false,
    emptyText: 'empty text',
    selectOnFocus: true,
    listeners: { select: AdjustPrice, change: AdjustPrice, beforeselect: function (combo, record, index) { return ('false' == record.data.disabled); } },
    applyTo: 'confelement'
});

Я также пытался удалить width: 600 и заменить его на minListWidth: 600, но этот результат не устранил проблему. замещающий текст http://img28.imageshack.us/img28/7665/4272010105134am.png< /а>


combobox resize extjs autosize
person ITRushn    schedule 27.04.2010    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Попробуйте следующее:

  1. Определите параметр списка с наибольшим количеством символов
  2. Создайте div и установите параметр с наибольшим количеством символов
  3. Добавить этот div в тело
  4. Получить clientWidth div

Нижеприведенные коды работают в ExtJs 3.2!

myStore = new Ext.data.Store({
 ...
listeners : {
            load: function() {
                var maxValue = "";
                var charLen = 0, maxCharLen = 0;
                var maxListWidth = 300;

                /**
                 * This is a work-around since the 'listWidth' property
                 * does not accept any values that would simulate auto-resize
                 * in reference to the category with the most characters.
                 */
                this.data.each(function(item, index, totalItems ) {
                    var nameValue = item.data['name']; // 'name' is the field name

                    if(nameValue == null || nameValue == ''){
                        // do nothing
                    }else {
                        charLen = nameValue.length;
                        if(charLen > maxCharLen){
                            maxCharLen = charLen;
                            maxValue = nameValue;
                        }
                    }
                });

                if(maxValue != ""){
                    var divEl = document.createElement('div');
                    divEl.id = 'tempEl';
                    divEl.style.display = "inline";
                    divEl.className = "x-combo-list";
                    divEl.innerHTML = maxValue;

                    document.body.appendChild(divEl);

                    // check if appended
                    divEl = document.getElementById('tempEl');
                    if(divEl) {
                        var divWidth = divEl.clientWidth;
                        if(divWidth == 0 ) {
                            divEl.style.display = "inline-block";
                            divWidth = divEl.clientWidth;
                        }

                        // the allocated width for the scrollbar at side of the list box
                        var scrollbarWidth = 30;

                        // make sure that column width is not greater than
                        if((divWidth + scrollbarWidth) > maxListWidth) {
                            maxListWidth = divWidth + scrollbarWidth;
                            myCombo.listWidth = maxListWidth; 
                        }
                        document.body.removeChild(divEl);
                    }
                }
            }
});

var myCombo = new fm.ComboBox({
 ...
});
person beardbender    schedule 10.02.2012

arrow_upward
0
arrow_downward

попробуйте autoWidth: правда

и удалите параметр ширины

person Natkeeran    schedule 27.04.2010
comment
согласно документации такой опции конфигурации нет. extjs.com/deploy/ext/docs/ вывод/Ext.form.ComboBox.html#configs - person ITRushn; 28.04.2010

arrow_upward
0
arrow_downward

width: 600 верно, поэтому у вас должна быть какая-то другая проблема, которая не очевидна из того, что вы опубликовали. Вы можете попробовать удалить конфигурацию applyTo и вместо этого поставить renderTo: Ext.getBody(), просто чтобы посмотреть, имеет ли она какое-то отношение к тому, как она применяется к вашему элементу. Вы уверены, что нет другого кода, который мог бы повлиять на ширину?

person Brian Moeskau    schedule 27.04.2010
comment
Ширина колодца: 600 делает свое дело, и расширьте поле со списком до 600. Проблема в том, что это всегда 600, но иногда содержимое параметров слишком длинное и поэтому не отображается полностью. Я ищу способ, чтобы выпадающий список автоматически определял, какую ширину установить, чтобы параметры всегда отображались полностью. - person ITRushn; 28.04.2010

arrow_upward
0
arrow_downward

Найдено здесь:

// throw this stuff in a closure to prevent
// polluting the global namespace
(function(){

    var originalOnLoad = Ext.form.ComboBox.prototype.onLoad;
    Ext.form.ComboBox.prototype.onLoad = function(){
        var padding = 8;
        var ret = originalOnLoad.apply(this,arguments);
        var max = Math.max(this.minListWidth || 0, this.el.getWidth());
        var fw = false;
        Ext.each(this.view.getNodes(), function(node){
            if(!fw){ fw = Ext.fly(node).getFrameWidth('lr'); }
            if(node.scrollWidth){ max = Math.max(max,node.scrollWidth+padding); }
        });
        if( max > 0 && max-fw != this.list.getWidth(true) ){
            this.list.setWidth(max);
            this.innerList.setWidth(max - this.list.getFrameWidth('lr'));
        }
        return ret;
    };

})();
person Andron    schedule 23.12.2013