Радиогруппа Extjs с кнопками

Question

Для создания набора инструментов я хочу знать, как сделать радиогруппу с обычными кнопками, а не с радиокнопками в последних extJS

Как это с jQueryUI: http://jqueryui.com/demos/button/#radio

Спасибо взаранее, Хиелус

Answer 1

Думаю, вам стоит взглянуть на использование стандартных кнопок ExtJS. Кнопку можно назначить группе , чтобы они действовали как элементы, показанные в вашей ссылке.

См. Этот пример:

{
    xtype: 'button',
    text: 'Choice 1',
    toggleGroup: 'mygroup'
}, {
    xtype: 'button',
    text: 'Choice 2',
    toggleGroup: 'mygroup'
}, {
    xtype: 'button',
    text: 'Choice 3',
    toggleGroup: 'mygroup'
}

Кнопки также имеют свойство под названием enableToggle, которое позволяет им переключаться, и автоматически устанавливается в значение true, когда вы устанавливаете toggleGroup, а toggleGroup сообщает ExtJS, как они связаны.

Обратите внимание, они выглядят как обычные кнопки ExtJS, но ведут себя так, как вы хотите.

Answer 2

Существует менее сложный (лучше?) Способ запретить отмену выбора кнопки. Установите для параметра конфигурации allowDepress значение false:

{
    xtype: 'radiogroup',
    layout: 'hbox',
    defaultType: 'button',
    defaults: {
        enableToggle: true,
        toggleGroup: 'mygroup',
        allowDepress: false,
        items: [
            { text: 'Choice 1'},
            { text: 'Choice 2'},
            { text: 'Choice 3'}
        ]
    }
}

Answer 3

Просто чтобы ответить на комментарий @ mastak (в ответе выше), чтобы запретить действие отмены выбора кнопки, добавьте этот слушатель к каждой кнопке:

listeners: {
   click: function(me, event) {
      // make sure a button cannot be de-selected
      me.toggle(true);
   }
}

Таким образом, каждый щелчок по кнопке перевыбирает ее.

-dbg

Answer 4

Просто добавляю в пост @deebugger. Вы также можете использовать следующее свойство кнопки, чтобы запретить выделение

Ext.create('Ext.Button', {
    renderTo     : Ext.getBody(),
    text         : 'Click Me',
    enableToggle : true,
    allowDepress : false
});