Question

我想尝试做一些事情，我认为，使用EXT.js 4应该相对简单，但我找不到答案。我试图创建一个类型为＆＃34;复选框＆＃34;的复选框。目前，当我尝试将其渲染为类型=＆＃34;按钮＆＃34;

这里有一个我正在做的事情的样本（我相信这段代码来自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()
});

RENDERS

<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 =＆＃34;按钮＆＃34;？我的类型是＆＃34;复选框＆＃34;

让我说明原因，也许我正在接近这个错误。我试图让JAWS读者按照它应该的方式阅读复选框。作为一种类型＆＃34;按钮＆＃34; JAWS读者读取它就像一个按钮，不能读取复选框旁边的标签。

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

罗斯

Answer 1

您可以使用config autoEl 执行此操作。检查这个小提琴：http://jsfiddle.net/vdazU/3262/

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

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

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

Answer 3

我已经完成了我的代码并且工作正常。我正在使用extjs 6.0.2，我认为您所看到的是需要检查的框前缀到标签。它始终只是一个按钮。即使你使用无线电领域，它也将是dom中的type =“button”，因为该方框必须处理可以通过type =“button”处理的点击事件。你能否提出你需要它作为type =“checkbox”的原因？

渲染＆＃34;正常＆＃34;带有ext.js 4的复选框

3 个答案: