Extjs Ext.ComboBox analyse automatiquement le contenu existant

J'ai un problème lors de l'application d'une Ext.ComboBox sur un élément de sélection html existant, même si le contenu existant rend le html sélectionner environ 20px (par son contenu, la largeur non statique est définie), Ext.ComboBox redimensionne à une sorte de défaut , Large, valeur de largeur. Il existe un moyen de redimensionner automatiquement Ext.ComboBox en fonction des éléments existants et de ne pas utiliser la largeur par défaut?

Même si je sais quel est le meilleur outil Ext, ce problème permettra à mes collègues de jeter Extjs.

Merci d'avance

Vous ne pouvez pas techniquement créer une «largeur automatique» combinée: Ext convertit réellement le <select> en une <input> régulière derrière les scènes et <input> éléments <input> doivent avoir une largeur / taille spécifiée. Cependant, vous pouvez essayer Ext de dimensionner le combo en fonction du <select> existant qui devrait vous donner le même résultat final. Voici un exemple de la page de démonstration combo Ext, où j'ai modifié la valeur de configuration de largeur :

 var converted = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', transform:'state', width: Ext.fly('state').getWidth(), forceSelection:true });

L'obstacle évident serait que si vous modifiez la liste après son rendu, le combo ne se redimensionnera pas automatiquement et vous devriez trouver un moyen de le redimensionner vous-même.

Utilisez ce code:

 Ext.ux.ResizableComboBox = Ext.extend(Ext.form.ComboBox, { initComponent: function(){ Ext.ux.ResizableComboBox.superclass.initComponent.call(this); this.on('render', this.resizeToFitContent, this); }, resizeToFitContent: function(){ if (!this.elMetrics){ this.elMetrics = Ext.util.TextMetrics.createInstance(this.getEl()); } var m = this.elMetrics, width = 0, el = this.el, s = this.getSize(); this.store.each(function (r) { var text = r.get(this.displayField); width = Math.max(width, m.getWidth(text)); }, this); if (el) { width += el.getBorderWidth('lr'); width += el.getPadding('lr'); } if (this.trigger) { width += this.trigger.getWidth(); } s.width = width; this.setSize(s); this.store.on({ 'datachange': this.resizeToFitContent, 'add': this.resizeToFitContent, 'remove': this.resizeToFitContent, 'load': this.resizeToFitContent, 'update': this.resizeToFitContent, buffer: 10, scope: this }); } });Ext.reg('resizable-combo', Ext.ux.ResizableComboBox);

En plus de ce que bmoeskau suggère, vous pouvez utiliser un xtemplate pour les éléments de votre combo. Cela vous donnera la possibilité de changer l'apparence de l'objet. Vous pouvez envelopper du texte, ajouter des images, etc.

Ajoutez un auditeur à l'événement afterrender et définissez la largeur si la liste (la division qui descend) est automatique, par exemple

 afterrender: function(combo){ combo.list.setSize('auto', 0); combo.innerList.setSize('auto', 0); }

La raison pour laquelle j'utilise afterrender et not render est parce que si vous définissez lazyInit à false, cela définira la largeur de la liste, alors, dans afterrender, vous annulez le setWidth

Je suis sûr que vous pouvez obtenir ExtJs pour rendre les éléments html dont vous avez besoin, de la manière dont vous souhaitez qu'ils soient rendus.

Voici un code du fichier Exemples / Form / Combos.js :

 var converted = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', transform:'state', width:20, //<-- set this config value! forceSelection:true });

Dans le code que vous utilisez pour transformer le combo, spécifiez simplement une largeur pour le combo ExtJs.