调整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' 
}); 

我也试着删除宽度：600与minListWidth替换它：600，但这个结果之后，并没有解决问题。 alt text http://img28.imageshack.us/img28/7665/4272010105134am.png

Answer 1

尝试 autoWidth：真

，并从你贴什么删除宽度参数

Answer 2

width: 600是正确的，所以你必须有一些其他的问题，怎么回事，这不是很明显。您可能会尝试删除applyTo配置，而不是将renderTo: Ext.getBody()仅用于查看它是否与应用于您的元素有关。你确定没有其他可能会影响宽度的代码吗？

Answer 3

尝试以下操作：

1. 确定最字符列表框选择
2. 创建一个div并设定最字符
3. 选项追加这个div的身体
4. 获取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({ 
... 
}); 

Answer 4

实测值here：

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

})();