Redimensionner Ext.form.ComboBox pour s'adapter à son contenu

Question

Il existe peu de solutions sur les forums Ext, mais je n'ai pas réussi à les faire fonctionner. Il semble que je manque quelque chose de mineur.

J'ai besoin de redimensionner la liste déroulante pour l'adapter à son contenu lors de sa création. Je n'ai pas besoin de redimensionner quand le contenu change.

Existe-t-il des exemples de travail utilisant Extjs 3.2?

Code actuel:

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

J'ai aussi essayé d'enlever la largeur: 600 et le remplacer par minListWidth: 600, mais ce résultat suivant et na pas résoudre le problème. alt text http://img28.imageshack.us/img28/7665/4272010105134am.png

Answer 1

essayer Largeur automatique: true

et supprimez le paramètre de largeur

Answer 2

width: 600 est correcte, vous devez donc avoir une autre question se passe ce n'est pas évident de ce que vous avez publié. Vous pouvez essayer de supprimer la configuration applyTo et de mettre à la place renderTo: Ext.getBody() juste pour voir si cela a quelque chose à voir avec la façon dont il est appliqué à votre élément. Êtes-vous sûr qu'il n'y a pas d'autre code qui pourrait affecter la largeur?

Answer 3

Effectuez les opérations suivantes:

1. Déterminer l'option zone de liste avec le plus caractères
2. Créer une div et réglez l'option avec le plus caractères
3. Append cette div au corps
4. Obtenez le clientWidth de div

Ci-dessous les codes fonctionne en 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 Trouvé:

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

})();