Question

我正在使用ExtJs 4构建一个包含几个表单的新网页，没什么了不起的。在这个页面上，我有一个使用复选框选择模型的网格面板，模式设置为“单个”。这是我的选择模型配置：

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实现。

您可以发现默认图片来自build / production / {app name} /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文件到资源的路径可能不稳定或不方便定义它。我建议你只需转到找到radio.png的文件夹并将其保存到应用程序的默认图像文件夹中。然后使用CSS中的路径会更容易。

Answer 2

您可以使用radiobutton 如果你将defaultTYpe更改为radiogroup，那么只看到一个变化，那就是剩下的东西是相同的

docs：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

复选框选择模型 - 单选按钮样式？

2 个答案: