This duplicates another bug already reported in our system: EXTJS-6169
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    mort-ext is on a distinguished road

      0  

    Default Checkboxgroup layout bug when adding checkboxes dynamically

    Checkboxgroup layout bug when adding checkboxes dynamically


    Hi,

    I experienced an error when adding components/checkboxes dynamically.

    I build a testcase for reconstruction:
    Code:
     Ext.create('Ext.window.Window',
    {
        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++) {
                checkboxgroup.add({
                    xtype: 'checkboxfield',
                    checked: true,
                    inputValue: i,
                    boxLabel: "test dynamic item " + i
                });
            }
        }
    });
    Output:
    extjs_window.png

    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:
    html.png

    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

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    mort-ext is on a distinguished road

      0  

    Default


    Can someone move this to the bugs category please?

  3. #3
    Sencha User
    Join Date
    Jul 2007
    Location
    Germany
    Posts
    55
    Vote Rating
    0
    rednix is on a distinguished road

      0  

    Default


    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:
    Code:
        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: []
                } ]
                
            ...
                
            me.callParent(arguments);
            
            me.createCheckboxes();
        },
        
        createCheckboxes: function() {
            var me = this;
            var store = Ext.create('Autoexport.components.store.Criteria');
            
            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')});
                });
    
                formPanel.add(cmpArray);
            }, me);
    
            store.load();
        }
    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

Thread Participants: 1

Tags for this Thread