调整 Ext.form.ComboBox 的大小以适合其内容

Question

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< /a>

Answer 1

尝试以下操作：

1. 确定具有最多字符的列表框选项
2. 创建一个 div 并设置具有最多字符的选项 将此
3. div 附加到正文
4. 获取 div 的 clientWidth

下面的代码适用于 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({
 ...
});

Answer 2

尝试
autoWidth: true

并删除宽度参数

Answer 3

width: 600 是正确的，因此您肯定还存在其他问题，而这些问题从您发布的内容来看并不明显。您可以尝试删除 applyTo 配置，而是放置 renderTo: Ext.getBody() 只是为了看看它是否与它如何应用于您的元素有关。您确定没有其他代码可能会影响宽度吗？

Answer 4

找到此处：

// 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;
    };

})();