复选框组更改列 - ＆gt;重新渲染

Question

我有一个带有预定义

的复选框组

columns : 6,

和调整大小事件

listeners: {
    resize:function( mee, width, height, e, eOpts ) {
        console.log(me.columns);
        console.log(mee.columns);
        mee.columns = Math.floor(width/200);
        // mee.doAutoRender();
        console.log(me.columns);
        console.log(mee.columns);
        console.log('resize');
    }

控制台日志记录显示me.columns和mee.columns在第一次调整大小之前和之后是9（全高清屏幕 - ＆gt; floor（1920/200）= 9）

但我不知道如何强制重新渲染。列没有像我希望的那样改变。

Answer 1

只需设置布局：'列'。以下是工作示例：http://jsfiddle.net/TNgTG/

var checkboxGroup = Ext.create('Ext.form.Panel', {
    id: 'CheckboxGroup',
    width: 180,
    title: 'Checkbox Group',
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'checkboxgroup',
        layout: 'column',
        items: [
            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' },
            { boxLabel: 'Item 2', 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' }
        ]
    }]
});

Ext.create('Ext.resizer.Resizer', {
    el: 'CheckboxGroup',
    handles: 'all',
    pinned: true,
    listeners: {
        resize: function(me, width, height){
            checkboxGroup.setSize(width, height);
        }
    }
});