extjsextjs6.2

EXTJS 6.2.1 Bulleted Group Similar to a CheckboxGroup


Anyone know if there is an EXTJS control that can produce a bulleted group of items similar to what a checkbox group does?


Solution

  • If you want a bulleted list appearance, you can customize the checkboxgroup styling using CSS like the example below

    Ext.application({
        name: 'BulletListExample',
        launch: function () {
            Ext.create('Ext.form.Panel', {
                title: 'Bullet List Example',
                width: 300,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'checkboxgroup',
                    columns: 1,
                    cls: 'bullet-list', // Apply custom CSS class
                    items: [{
                            boxLabel: 'Item 1',
                            name: 'item1'
                        }, {
                            boxLabel: 'Item 2',
                            name: 'item2'
                        }, {
                            boxLabel: 'Item 3',
                            name: 'item3'
                        },
                        // Add more items as needed
                    ]
                }]
            });
        }
    });
    

    CSS:

    .x-form-checkbox-default:before {
        content: '\2022';
    }
    
    .x-form-cb-checked .x-form-checkbox-default:before {
        content: '\2022';
    }