Модель выбора галочки - пульт дистанционного управления?

Question

Я использую ExtJs 4 для создания новой веб-страницы с несколькими формами в ней, ничего сумасшедшего. На этой странице у меня есть сетка, использующая модель выбора флажка с режимом, установленным на «Single». Вот моя конфигурация моей выборки:

Ext.create('Ext.selection.CheckboxModel', { 
    mode: 'Single', 
    checkOnly: true, 
    showHeaderCheckbox: false 
    /*listeners: { 
     select: function(model, record, idx) {}, 
     deselect: function(model, record, idx) {} 
    }*/ 
}); 

Функционально это работает абсолютно нормально. Он ограничивает пользователя одним выбором в сетке, в которой он используется. Однако в моих требованиях это поле определяется как переключатель (что имеет смысл, поскольку в базовом HTML это будет тип ввода, используемый для одного выбора, а не флажок).

Есть ли настройка конфигурации, которую я мог бы добавить к модели выбора, чтобы поле отображалось как переключатели вместо флажков? В качестве альтернативы, есть ли обновление CSS, которое я мог бы сделать, чтобы показать поле в качестве переключателя?

Answer 1

Абсолютно вы можете добиться с помощью CSS.

Вы можете обнаружить, что изображение по умолчанию происходит из сборки/производства/{имя приложения} /resources/images/form/checkbox.png.

Внутри ExtJS:

{ 
    xtype: 'grid', 
    cls: 'checkbox-overwrite', 
    selModel:{ 
       selType: 'checkboxmodel', 
       mode: 'SINGLE' 
      } 
    ... 
} 

Внутри CSS

.checkbox-overwrite .x-grid-row-checker, 
.checkbox-overwrite .x-column-header-checkbox .x-column-header-text { 
    background-image: url(from your css file path to build/production/{app name}/resources/images/form/radio.png); 
} 

Иногда путь из файла CSS к ресурсу не может быть стабильным или не удобство для его определения. Я предлагаю вам просто перейти в папку find radio.png и сохранить ее в папке с изображениями по умолчанию вашего приложения. Тогда будет намного проще работать с дорожкой внутри CSS.

Answer 2

Вы можете использовать радиокнопку увидеть разницу есть только одно изменение, если изменить DefaultType к RadioGroup Thats это остальные вещи, такие же

документы: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Checkbox http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.Radio