使用 ext.js 4 渲染“正常”复选框答案

【问题标题】：Rendering a "normal" checkbox with ext.js 4使用 ext.js 4 渲染“正常”复选框
【发布时间】：2019-01-08 02:49:10
【问题描述】：

我正在尝试做一些事情，我认为使用 EXT.js 4 应该相对简单，但我找不到答案。我正在尝试创建一个当前类型为“复选框”的复选框，当我尝试将其呈现为 type="button"

这是我正在做的一个示例（我相信这段代码来自 Sencha 本身，但这是我想要做的）

此代码

Ext.create('Ext.form.Panel', {
    bodyPadding: 10,
    width      : 300,
    title      : 'Pizza Order',
    items: [{
        xtype      : 'fieldcontainer',
        fieldLabel : 'Toppings',
        defaultType: 'checkboxfield',
        items: [{
            boxLabel  : 'Anchovies',
            name      : 'topping',
            inputValue: '1',
            id        : 'checkbox1'
        }, {
            boxLabel  : 'Artichoke Hearts',
            name      : 'topping',
            inputValue: '2',
            checked   : true,
            id        : 'checkbox2'
        }, {
            boxLabel  : 'Bacon',
            name      : 'topping',
            inputValue: '3'
            id        : 'checkbox3'
        }]
    }],
    bbar: [{
        text: 'Select Bacon',
        handler: function() {
            var checkbox = Ext.getCmp('checkbox3');
            checkbox.setValue(true);
        }
    },
    '-',
    {
        text: 'Select All',
        handler: function() {
            var checkbox1 = Ext.getCmp('checkbox1'),
                checkbox2 = Ext.getCmp('checkbox2'),
                checkbox3 = Ext.getCmp('checkbox3');

            checkbox1.setValue(true);
            checkbox2.setValue(true);
            checkbox3.setValue(true);
        }
    },{
        text: 'Deselect All',
        handler: function() {
            var checkbox1 = Ext.getCmp('checkbox1'),
                checkbox2 = Ext.getCmp('checkbox2'),
                checkbox3 = Ext.getCmp('checkbox3');

            checkbox1.setValue(false);
            checkbox2.setValue(false);
            checkbox3.setValue(false);
        }
    }],
    renderTo: Ext.getBody()
});

渲染

<input type="button" hidefocus="true" autocomplete="off" class="x-form-field x-form-checkbox x-form-cb" id="checkbox1-inputEl" aria-invalid="false" data-errorqtip="">

注意到 type="button" 了吗？我需要类型是“复选框”

让我包括原因，也许我正在接近这个错误。我试图让 JAWS 阅读器以应有的方式阅读复选框。作为“按钮”类型，JAWS 阅读器像按钮一样阅读它，而不是阅读复选框附带的标签。

希望如此，请提出您需要的任何问题并感谢您的帮助。

罗斯

【问题讨论】：

您使用的是什么版本的 ExtJS？ 4.1？ 4.2？
这段代码有什么问题我可以看到这里面的正常行为。你能指定更多细节吗？
这里的问题是需要一个属性 role="checkbox" 才能被 JAWS 正确显示。
我正在使用 4.1.... 看起来像添加 role="checkbox" 作品。我现在正在环顾四周，如何添加它，但如果有人不能指出我正确的方向，我将不胜感激。谢谢！

标签： javascript extjs checkbox jaws-screen-reader

【解决方案1】：

您可以使用配置 autoEl 来做到这一点。检查这个小提琴：http://jsfiddle.net/vdazU/3262/

{
    xtype: 'component',
    autoEl: {
        html: '<input type="checkbox" id="checkbox1" name="topping" >Anchovies'
}

如果您检查 DOM，您将能够看到一个 html 输入复选框。

【讨论】：

【解决方案2】：

我遇到了同样的问题，所以差不多 2 年后，这是你的答案：

您需要包含 css！我花了好几个小时才弄明白。

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css">

顺便说一句，在 3 后面加一个逗号。

inputValue: '3',

【讨论】：

【解决方案3】：

我已经运行了您的代码，并且运行良好。我正在使用 extjs 6.0.2，我认为您所看到的是需要检查标签前缀的框。它始终仅保留为按钮。即使您使用单选框，它也将是 dom 中的 type="button"，因为该框必须处理可以由 type="button" 处理的单击事件。你能提供你需要它作为 type="checkbox" 的原因吗？

【讨论】：

原因在问题中。