Ext JS 4 - Vertical ButtonGroup DOM Exception

Question

Getting an exception like this while trying to have a single column vertical buttongroup:

Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 [ext-all-dev.js:88026]

var btn1 = Ext.create('Ext.button.Button', {
    text: 'BTN 1',
    iconCls: 'icon-database-go-32'
});

var btn2 = Ext.create('Ext.button.Button', {
    text: 'BTN 2',
    iconCls: 'icon-data-table-32'
});

var actions = Ext.create('Ext.container.ButtonGroup', {
    columns: 1,
    defaults: {
        scale: 'large',
        iconAlign: 'top',
        rowspan: 3
    },
    title: 'Actions',
    items: [btn1, btn2]
});

this.dockedItems = [{
    xtype: 'toolbar',
    dock: 'left',
    items: [actions]    
}];

sra · Accepted Answer · 2012-09-24T07:37:25.703

1

Well, the rowspan kills it. Here is a tested example that works

var actions = Ext.create('Ext.container.ButtonGroup', {
    columns: 1,
    title: 'Actions',
    items: [
    {
        text: 'BTN 2',
        iconCls: 'icon-data-table-32',
        scale: 'large',
        iconAlign: 'top'
    }, {
        text: 'BTN 1',
        iconCls: 'icon-database-go-32',
        scale: 'large',
        iconAlign: 'top'
    }]
});

Here is the JSFiddle

edited Sep 24 '12 at 07:37

answered Sep 24 '12 at 05:50

sra

23,820
7
55
89

actually it didn't work too.. I just see normal 16x16 icons rendered vertical. I need big (32x32) icons.. – talha06 Sep 24 '12 at 07:15
@lonelywarriour Would you please check the fiddle I added to my answer. I don't have buttons but the space looks like 32x32 for me. – sra Sep 24 '12 at 07:38
thanks a lot @sra for your care, it worked after adding `defaults : { rowspan : 1 }` – talha06 Sep 24 '12 at 08:04

Ext JS 4 - Vertical ButtonGroup DOM Exception

1 Answers1