复选框组中的boxLabel包装不正确（ExtJs4.2）

Question

I'm having a problem with the box labels of the checkboxes being wrapped under the checkbox:

http://jsfiddle.net/6pYWh/

        {
            xtype: 'checkboxgroup',
            columns: 1,
            vertical: true,
            items: [{
                boxLabel: 'Item 1',
                name: 'rb',
                inputValue: '1'
            }, {
                boxLabel: 'Item 2 with large box label does not wrap properly',
                name: 'rb',
                inputValue: '2',
                checked: true
            }]
        }

I need the wrap to be inline-block with both blocks in the same line, so i have to force the width of the second block to a certain size in order to accomplish that:

http://jsfiddle.net/595Md/

The problem is that i'm not seeing a way to accomplish this dynamicaly, so if you resize the west panel, the box label width will have to be recalculated and updated in order to use all the space now available and still maintain the wrap at the same level of the checkbox.

Any toughts?

Answer 1

Modify the following css selector.

.hello-world {
    white-space: normal;
    text-align: justify;
    margin: -10px 0 0 10px;
}

Then, try this.

Ext.require(['*']);

Ext.onReady(function () {

var viewport = Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [{
        region: 'west',
        collapsible: true,
        header: false,
        split: true,
        width: 200,
        items: [{
            xtype: 'checkboxgroup',
            columns: 1,
            vertical: true,
            id: 'cb-group',
            items: [{
                boxLabel: 'Item 1',
                name: 'rb',
                inputValue: '1'
            }, {
                boxLabel: 'Item 2 with large box label does not wrap properly',
                name: 'rb',
                inputValue: '2',
                checked: true
            }, {
                boxLabel: 'Item 3',
                name: 'rb',
                inputValue: '3'
            }, {
                boxLabel: 'Item 4',
                name: 'rb',
                inputValue: '4'
            }, {
                boxLabel: 'Item 5',
                name: 'rb',
                inputValue: '5'
            }, {
                boxLabel: 'Item 6',
                name: 'rb',
                inputValue: '6'
            }],
            listeners: {
                beforerender: function() {
                    for (var i = 1; i < Ext.getCmp('cb-group').items.length; i++) {
                        if (Ext.getCmp('cb-group').items.items[i].boxLabel.length > 24 ) {
                            Ext.getCmp('cb-group').items.items[i].boxLabelCls = "hello-world";
                        }
                    }
                }
            }
        }]
    }, {
        region: 'center',
        html: 'center',
        title: 'Center'
    }, {
        region: 'south',
        title: 'South',
        height: 100,
        split: true,
        collapsible: true,
        html: 'south'
    }]
});
});