CheckBox Group disappears when I set an id on it

Question

I'm trying to make a simple toolbar in ExtJS containing a checkbox group and a button and it works just fine but when I try to give an id to my check box group the whole toolbar doesn't display anymore. Here is my code:

Ext.define
(
    'CMS.view.TreeGrid.Filters',
    {
        extend: 'Ext.form.Panel', 
        title: 'Filters',
        layout: 'fit',
        alias: 'widget.filters',
        bodyPadding: 10,
        renderTo: Ext.getBody(),
        vtype: 'hbox',
        items :
        [
            {
                xtype: 'toolbar',
                vtype: 'vbox',
                items:
                [

                    {
                        xtype: 'checkboxgroup',
                        //id: 'propertiesCBG',
                        fieldLabel: 'Properties',
                        vertical: true,
                        layout: 'fit',
                        items: 
                        [
                            { boxLabel: 'id',           name: 'rb', inputValue: '1' },
                            { boxLabel: 'State',        name: 'rb', inputValue: '2', checked: true },
                            { boxLabel: 'headline',     name: 'rb', inputValue: '3' },
                            { boxLabel: 'severity',     name: 'rb', inputValue: '4' },
                            { boxLabel: 'country',      name: 'rb', inputValue: '5' },
                            { boxLabel: 'hasRelated',   name: 'rb', inputValue: '6' }
                        ]
                    },
                    {
                        xtype: 'button',
                        text: 'Request',
                        id: 'requestButton',
                    },
                ]
            }
        ]
    }
);

When the line "id: propertiesCGB" is commented i don't have any problem and the toolbar displays like I want it to display but I need an id for my checkbox group to get its values on my controller. Please help me, I just can't understand what the problem is.

Answer 1

In general it is a bad practice to use the id property. If you must have some sort of id, use itemId, which will not have any type of global uniqueness constraint and also allow you to use # in your selector.

People generally use ids to make it easy to get a reference to a component, something like: Ext.ComponentQuery.query('#myid');

What you should really be doing is:

Ext.ComponentQuery.query('filters checkboxgroup')

in order to get a reference to your checkboxgroup.

In your case, change the selector in your controller to be 'filters checkboxgroup' and you should be just fine. Note, if you have more than one of these in your application, add more specificity to your selector, for instance, if your filters component is a child of a particular panel:

Ext.ComponentQuery.query('panel1 filters checkboxgroup')

Answer 2

have you tried changing the id to something else temporarily to confirm you don't have a duplicate elsewhere in your project?

          xtype: 'checkboxgroup',
          id: 'propertiesCBG_temp',
          fieldLabel: 'Properties',

I've seen similar behavior when having two components with the same id.

Answer 3

Finally, it appeared that I called my toolbar in two different views so I guess this created the conflict with the ID. I'll find another way to reuse my toolbar.