Question

我的复选框的框标签出现问题：

        {
            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
            }]
        }

我需要使用同一行中的两个块进行内联块的包装，因此我必须将第二个块的宽度强制为一定大小才能实现：

http://jsfiddle.net/595Md/

问题在于我没有看到实现此动态的方法，因此如果您调整西面板的大小，则必须重新计算和更新框标签宽度，以便使用现有的所有空间并仍然维护包装在复选框的同一级别。

有什么难事吗？

Answer 1

修改以下css选择器。

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

然后，试试这个。

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'
    }]
});
});

复选框组中的boxLabel换行不正确（ExtJs4.2）

1 个答案: