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.

score 1 · Accepted Answer · answered Oct 30 '13 at 17:32

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

score 0 · Answer 2 · answered Oct 29 '13 at 20:58

0

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.

answered Oct 29 '13 at 20:58

BourbonBenny

36
2

Yes, my id first was "properties" and I thought maybe it was a pre existing id on extjs, that's why I changed it for "propertiesCBG and there is no way it's not unique, my code is quite short actually. – Toussah Oct 30 '13 at 07:30

score 0 · Answer 3 · answered Oct 30 '13 at 07:40

0

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.

answered Oct 30 '13 at 07:40

Toussah

245
1
3
14

If there is a conflict between ids, ExtJs gives a warning in the console. Use Chrome Devtools and you notice such errors immediately. – Lorenz Meyer Oct 30 '13 at 19:31

CheckBox Group disappears when I set an id on it

3 Answers3