調整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; 
    }; 

})();