Question

我正在使用ExtJs 4.1.1并希望渲染普通复选框以在div中呈现，但是使用以下代码将其呈现为按钮。我检查了Ext.s来源Ext.form.field.Checkbox，并找到了对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

                    }

                 ]

            }]
        })

Answer 1

我认为问题在于您没有在项目中包含css / images here is example

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');
})

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

1 个答案: