ExtJs 4.1.1复选框呈现为按钮，需要正常复选框

ExtJs 4.1.1 Checkbox is rendering as button, need normal check box

本文关键字：复选框 ExtJs 按钮      更新时间：2023-09-26

我使用的是ExtJs 4.1.1，希望在div中呈现普通复选框，但使用以下代码，它被呈现为按钮。我检查了Ext.form.field.Checkbox的ExtJs源代码，在其中发现了fieldSubTpl属性的注释，该注释表示

// Creates not an actual checkbox, but a button which is given aria role="checkbox" (If ARIA is required) and
// styled with a custom checkbox image. This allows greater control and consistency in
// styling, and using a button allows it to gain focus and handle keyboard nav properly.

如果是这种情况，那么如何获得正常复选框？

 Ext.create('Ext.container.Container',{
            id: 'myContainer',
            width: 100,
            renderTo: 'chekboxId',
            items: [{
                 xtype:'checkboxgroup',
                 id:'chekcboxGrpId',
                 items:[
                    {
                         boxLabel: 'Text check box',                     
                     name : 'MyCheckBox',
                     inputValue: 'true',
                     checked: true
                    }
                 ]
            }]
        })

我认为问题在于您的项目中没有包含css/image这是的例子

css

<link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.1/resources/css/ext-all-gray.css">

HTML

    <div id="checkbox"></div>

Javascript

Ext.onReady(function(){
    var panel = Ext.create('Ext.panel.Panel', {
        items: {
            xtype: 'fieldcontainer',
            fieldLabel: 'Toppings',
            defaultType: 'checkbox',
            items: [
                {
                    boxLabel  : 'Anchovies',
                    name      : 'topping',
                    inputValue: '1',
                    id        : 'checkbox1'
                }
            ]
        }
    });
    panel.render('checkbox');
})
相关文章：