CODEWITHSUNDEEP
extjs
Eleanor
Eleanor

Reputation: 357

ExtJS CheckboxGroup label wrap

I have a problem with checkboxes. So these checkboxes are in columns, and the longer labels wrap under their checkboxes. Is there any sollution to setting the column width to the longest label? It must be dynamic width. Can you help me?

Upvotes: 2

Views: 2424

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

Here's something you can use to measure all the labels and apply the width of the widest one to all of them http://jsfiddle.net/Wr7Wr/1/

Ext.define('DynamicLabelFormPanel', {
    extend: 'Ext.form.Panel',

    initComponent: function() {
        // Need to create a hidden field to measure the text
        var field = new Ext.form.field.Text({fieldLabel: 'Testing', value: 'whateves', renderTo: Ext.getBody(), hidden: true});
        var metrics = new Ext.util.TextMetrics(field.labelEl);
        var widths = Ext.Array.map(this.items, function(item) {
            // Need to acount for the : 
            return metrics.getWidth(item.fieldLabel + ":");
        });
        var maxWidth = Math.max.apply(Math, widths);
        for (var i = 0; i < this.items.length; i++) {
            this.items[i].labelWidth = maxWidth;
        }
        this.callParent();
    }
}

This would probably be better as a plugin, but it shows you what needs to be done

Upvotes: 2

Related Questions