javascript - 使用 ext.js 4 渲染 "normal"复选框

Question

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

这是我正在做的事情的示例(我相信这段代码来自 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 阅读器像按钮一样读取它，并且不会读取复选框附带的标签。

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

罗斯

Answer 1

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

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

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