Question

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?

Answer 1

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