ExtJS. Радиокнопки и флажки

Радиогруппа. В ExtJS за неё отвечает класс Ext.form.RadioGroup

Довольно показательный пример есть в документации

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: 400,
    height: 125,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'radiogroup',
        fieldLabel: 'Two Columns',
        // Arrange radio buttons into two columns, distributed vertically
        columns: 3, // coloumns и vertical отвечают за колоночность
        vertical: true,
        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' },
            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
        ]
    }]
});

Ext.create('Ext.form.Panel', {

title: 'RadioGroup Example',

width: 400,

height: 125,

bodyPadding: 10,

renderTo: Ext.getBody(),

items:[{

xtype: 'radiogroup',

fieldLabel: 'Two Columns',

// Arrange radio buttons into two columns, distributed vertically

columns: 3, // coloumns и vertical отвечают за колоночность

vertical: true,

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' },

{ boxLabel: 'Item 6', name: 'rb', inputValue: '6' }

]

}]

});

Флажки. Класс в ExtJS это Ext.form.CheckboxGroup

В принципе синтаксис почти точно такой же, только нужно изменить одно единственное слово radiogroup на checkboxgroup

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: 400,
    height: 125,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items:[{
        xtype: 'checkboxgroup',
        fieldLabel: 'Two Columns',
       
        columns: 3, // coloumns и vertical отвечают за колоночность
        vertical: true,
        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' },
            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }
        ]
    }]
});