Extjs Ext.ComboBox autosize über vorhandenen Inhalt

Question

Ich habe ein Problem bei der Anwendung eines Ext.ComboBox über eine bestehende html auswählen Element, auch wenn der vorhandene Inhalt macht die HTML-Auswahl über 20px (durch den Inhalt nicht statische Breite eingestellt ist), die Ext.ComboBox wird auf eine Art von Standard, groß, Breite Wert anpassen. Gibt es eine Möglichkeit, die Ext.ComboBox automatisch auf der Grundlage der vorhandenen Elemente und nicht mit der Standardbreite zu ändern?

Auch wenn ich weiß, welches das beste Werkzeug Ext ist, wird dieses Problem meine Kollegen dazu bringen, Extjs zu verwerfen.

Vielen Dank im Voraus

Answer 1

Technisch gesehen kann man eine Kombination nicht auf "automatische Breite" stellen - Ext konvertiert tatsächlich die <select> in eine reguläre <input> hinter den Kulissen, und <input> Elemente müssen eine bestimmte Breite/Größe haben. Sie können jedoch Trick Ext in die Dimensionierung der Combo auf der Grundlage der vorhandenen <select> was zu demselben Ergebnis führen sollte. Hier ist ein Beispiel aus dem Ext Combo-Demo-Seite , wobei ich die Breite Konfigurationswert:

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

Der offensichtliche Nachteil ist, dass sich die Größe der Kombination nicht automatisch ändert, wenn Sie die Liste nach dem Rendern ändern, und Sie müssen selbst einen Weg finden, die Größe zu ändern.

Answer 2

Verwenden Sie diesen 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);

Answer 3

Zusätzlich zu dem, was bmoeskau vorschlägt, können Sie eine xtemplate für die Elemente Ihrer Combo verwenden. Damit haben Sie die Möglichkeit, das Aussehen des Artikels zu ändern. Sie können Text umbrechen, Bilder hinzufügen, usw.

Answer 4

Fügen Sie dem Afterrender-Ereignis einen Listener hinzu und setzen Sie die Breite der Liste (das Div, das nach unten klappt) auf Auto, z. B.

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

Der Grund, warum ich Afterrender und nicht rendern ist, weil, wenn Sie lazyInit auf false es die Liste Breite festgelegt wird, so in Afterrender Sie überschreiben, dass setWidth

Answer 5

Ich bin mir ziemlich sicher, dass Sie ExtJs dazu bringen können, beliebige HTML-Elemente so darzustellen, wie Sie es wünschen.

Hier ist etwas Code aus dem Beispiele/Form/Combos.js Datei:

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

in dem Code, den Sie verwenden, um die Combo zu transformieren, geben Sie einfach eine Breite für die ExtJs-Combo an.