PDA

View Full Version : Vertical ButtonGroup DOM Exception



talha06
22 Sep 2012, 1:10 PM
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]
}];

vietits
22 Sep 2012, 6:51 PM
Setting rowspan to 1 will fix the problem.


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

talha06
23 Sep 2012, 12:21 AM
It didn't solve the problem. I don't see any exceptions now, but I want to use 'large' scaled icons (32x32) as I defined in buttongroup defaults config.. Now it's rendered as 16x16.

talha06
23 Sep 2012, 7:46 AM
Any other ideas?? :-/

vietits
23 Sep 2012, 11:54 PM
1. In your first post, you've just mentioned only one problem is that the error "Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 [ext-all-dev.js:88026]" and my solution has fixed that problem. So saying that it does not solve the problem is incorrect.


2. Below are solutions for your new problem:
2.a: Your way


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


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


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

2.b Recommended


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

talha06
24 Sep 2012, 12:06 AM
@vietits

Thanks a lot, first solution is worked! I didn't understand why the second one didn't work at all.. :-?

The only detail which can be useful for Ext JS future releases, it didn't stretch buttons horizontally. I mean widths of buttons aren't same. It'd be better if this can be solved too..

vietits
24 Sep 2012, 12:12 AM
FYI: The following example works fine for me with Ext 4.1.1 & Chrome.


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


var panel = Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
title: 'Demo',
width: 400,
height: 300,
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [actions]
}]
});
});

talha06
24 Sep 2012, 12:33 AM
@vietits

I see, by the way I tested it with Ext JS 4.1.1 on Chromium 20.0 & Firefox 15.0.1 [for Ubuntu Linux]