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

Question

I'm trying to do something, i think, that should be relatively simple with EXT.js 4, but I can not find an answer. I'm trying to create a checkbox with a type of "checkbox" currently when I try it renders it as a type="button"

here is a sample of what I'm doing (I belive this code comes from Sencha itself, but it is what I am trying to do)

THIS CODE

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="">

Notice the type="button"? I nee the type to be a "checkbox"

Let me include the reason, maybe I am approaching this wrong. I am trying to make JAWS reader read the checkbox the way it should. As a type "button" JAWS reader reads it like a button and dose not read the label that goes with the check box.

Hope this makes since, please ask any question you need to and thanks for any help.

Ross

Answer 1

You can do this using config autoEl . Check this fiddle: http://jsfiddle.net/vdazU/3262/

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

If you inspect the DOM, you will be able to see a html input checkbox.

Answer 2

I had the same problem, so almost 2 years later, here's your answer:

You need to include the css! It took me hours to figure this out.

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

BTW, put a comma after the 3.

inputValue: '3',

Answer 3

I had run your code at my end and its working fine. I am using extjs 6.0.2 and I think what you are seeing is that box that needs to be checked prefix to the label. It always remains as a button only. Even if you use a radiofield, then also it will be type="button" in dom because that box has to handle click event which can be handled by type="button". Can you provide the reason why you need it as type="checkbox"?