How to set bo box width to auto fit it's longest field option text ?

Say, I have bo box field having width 300 ..But if from that bo there is a field option having some long text - bigger than 300px.

I want to make my bo box width auto fit to that long field option to see entire selected field option in Combo without any cutting.

Actually, I forgot there is config which do same thing for bo in extjs.

I think in ExtJS 4, bo width was getting set to auto fit for longest field option.

I don't want to do it by dynamically adding code to auto resize it.

How to set bo box width to auto fit it's longest field option text ?

Say, I have bo box field having width 300 ..But if from that bo there is a field option having some long text - bigger than 300px.

I want to make my bo box width auto fit to that long field option to see entire selected field option in Combo without any cutting.

Actually, I forgot there is config which do same thing for bo in extjs.

I think in ExtJS 4, bo width was getting set to auto fit for longest field option.

I don't want to do it by dynamically adding code to auto resize it.

• javascript
• html
• css
• extjs
• bobox

Share Improve this question Follow asked Dec 14, 2015 at 10:49 Abhijit MukeAbhijit Muke 1,21433 gold badges1717 silver badges4141 bronze badges 1

• Questions seeking code help must include the shortest code necessary to reproduce it in the question itself. See How to create a Minimal, Complete, and Verifiable example – Paulie_D Commented Dec 14, 2015 at 11:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

No need to add any manual code..Don't give width ..

grow : true,
growToLongestValue : true

Work for me in ExtJS 6 too..

Ext.create('Ext.form.ComboBox', {
       fieldLabel : 'Field',
       store : ['a', 'b', 'c', 'Long long long long long long long long'],
       grow : true,
       growToLongestValue : true,
       renderTo : Ext.getBody()
});

Check Sencha Fiddle https://fiddle.sencha./#fiddle/12jc

You would have to do it manually; it is not available in the Ext code. Something like this:

listeners: {
    afterrender: function(box) {
        var width = 0,
           metrics = new Ext.util.TextMetrics();
        box.getStore().each(function(rec) {
            var recWidth = textMetrics.getWidth(rec.get(box.displayField));
            width = Math.max(width,recWidth);
        });
        box.setWidth(width);
    }
}

Without any testing or warranty, but you should get an idea how to solve it.

A detailed example how to use TextMetrics can be found in the docs.