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

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

combobox extjs

调整Ext.form.ComboBox的大小以适合其内容,combobox,extjs,resize,autosize,Combobox,Extjs,Resize,Autosize,在Ext论坛上有相当多的解决方案，但我无法让它们中的任何一个正常工作。我好像错过了一些小事情我需要调整combobox的大小，以适应它首次创建时的内容。当内容发生变化时，我不需要担心调整它的大小是否有使用ExtJS3.2的工作示例当前代码： var store = new Ext.data.ArrayStore({ fields: ['view', 'value', 'defaultselect'], data: Ext.configdata.dataCP }); com

在Ext论坛上有相当多的解决方案，但我无法让它们中的任何一个正常工作。我好像错过了一些小事情

我需要调整combobox的大小，以适应它首次创建时的内容。当内容发生变化时，我不需要担心调整它的大小

是否有使用ExtJS3.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'
});

var store=new Ext.data.ArrayStore({
字段：[“视图”、“值”、“默认选择”]，
数据：Ext.configdata.dataCP
});
comboCPU=新的Ext.form.ComboBox({
tpl:“{view}
”，
店:店,，
displayField:“视图”，
宽度：600，
是的，
选择：对，
模式：“本地”，
触发动作：“全部”，
可编辑：false，
emptyText:“空文本”，
selectOnFocus:true，
侦听器：{select:AdjustPrice，change:AdjustPrice，beforeselect:function（组合、记录、索引）{return（'false'==record.data.disabled）；}，
阿普利托：“糖果”
});

我还尝试删除width:600并用minListWidth:600替换它，但结果如下，并没有解决问题。试试看自动宽度：真

并删除宽度参数

尝试自动宽度：真

删除width参数

width:600

是正确的，因此您必须有一些其他问题，这些问题在您发布的内容中并不明显。您可以尝试删除

applyTo

config，而将

renderTo:Ext.getBody（）

放在那里，看看它是否与应用于元素的方式有关。你确定没有其他代码会影响宽度吗？

宽度：600

是正确的，因此你一定有其他问题，从你发布的内容看不明显。您可以尝试删除

applyTo

config，而将

renderTo:Ext.getBody（）

放在那里，看看它是否与应用于元素的方式有关。您确定没有其他代码会影响宽度吗？

请尝试以下操作：

确定具有最多字符的列表框选项

创建一个div并设置具有最多字符的选项

将此div附加到主体

获取div的clientWidth

下面的代码在ExtJS3.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({
 ...
});