Results 1 to 3 of 3

Thread: Checkboxgroup layout bug when adding checkboxes dynamically

    This duplicates another bug already reported in our system: EXTJS-6169
  1. #1

    Default Checkboxgroup layout bug when adding checkboxes dynamically


    I experienced an error when adding components/checkboxes dynamically.

    I build a testcase for reconstruction:
        layout: 'fit',
        autoShow: true,
        modal: true,
        width: 230,
        height: 200,
        title: "test window",
        items: [
                xtype: 'form',
                autoScroll: true,
                border: 0,
                items: {
                    xtype: 'checkboxgroup',
                    columns: 1,
                    items: [
                            xtype: 'checkboxfield',
                            checked: true,
                            boxLabel: "test static item"
         methodToAddSomething: function()
            var checkboxgroup = this.down('checkboxgroup');
            for (var i = 0; i < 5; i++) {
                    xtype: 'checkboxfield',
                    checked: true,
                    inputValue: i,
                    boxLabel: "test dynamic item " + i

    As you can see the layout is broken.
    But more annoying is the fact that dynamically added checkboxes did not get checked.

    The HTML code will look like this:

    The static item is build within a table.
    Dynamic items will be added as an own tbody.

    I've changed the layout to vbox to fix this temporary.

    (I think there is no way to remove unwanted attachements? Uh a bug )
    Attached Images Attached Images

  2. #2


    Can someone move this to the bugs category please?

  3. #3
    Sencha User
    Join Date
    Jul 2007


    I'm having problems finding the bug post for EXTJSIV-6169 to verify if this has already been fixed.

    I'm having a similar problem with version 4.1.1 and a 3-column layout on the checkboxgroup. I'm adding the checkboxfield components dynamically on it but afterwards all items are displayed in one column.

    Relevant code snippets:
        initComponent: function() {
            var me = this;
                xtype: 'form',
                layout: 'anchor',
                region: 'center',
                defaults: {
                    anchor: '100%',
                    labelStyle: 'padding-left:4px;'
                items: [ {
                    xtype: 'checkboxgroup',
                    columns: 3,
                    vertical: true,
                    items: []
                } ]
        createCheckboxes: function() {
            var me = this;
            var store = Ext.create('');
            store.mon(store, 'load', function(cmp, records, successful, eOpts) {
                var formPanel = me.down('form');
                var cmpArray = [];
                Ext.Array.forEach(records, function(item, index, allItems) {
                    cmpArray.push({ xtype: 'checkboxfield', boxLabel: item.get('text'), name: item.get('value'), checked: item.get('selected')});
            }, me);
    Edit: seems everything OK - found my mistake and now it's working as expected. I've added the checkboxes to the form rather than the checkboxgroup component.
    Last edited by rednix; 7 May 2013 at 11:16 PM. Reason: found my mistake

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts