PDA

View Full Version : Combobox will be shrinked, whe



mari.maasikas
7 Mar 2011, 12:43 PM
Hi

I have problem with shrinking combobox, when using Tab panels, and toggling item's readOnly attribute.

Here is use case for code sample:
1) Activate first and second tab: both comboboxes will look correct
2) Activate first tab, click 'Remove readonly' button
3) Check second tab: combobox is shrinked

Screenshot:
25020



new Ext.Window({
width: 300,
height: 300,
layout: 'fit',
items: [{
xtype: 'tabpanel',
items: [{
title: 'first',
layout: 'form',
items: [{
xtype: 'combo',
anchor: '90%',
fieldLabel: 'Test 1',
id: 'c1',
readOnly: true
}]
}, {
title: 'second',
layout: 'form',
items: [{
xtype: 'combo',
anchor: '90%',
fieldLabel: 'Test 2',
id: 'c2',
readOnly: true
}]
}]
}],
bbar: [{
text: 'Remove readonly',
handler: function() {
Ext.getCmp('c1').setReadOnly(false);
Ext.getCmp('c2').setReadOnly(false);
}
}, {
text: 'Set readonly',
handler: function() {
Ext.getCmp('c1').setReadOnly(true);
Ext.getCmp('c2').setReadOnly(true);
}
}]
}).show();

ajit.mankottil
4 Apr 2012, 7:50 PM
I am facing same problem. Anyone can advice what is wrong in config?

sword-it
10 May 2012, 3:14 AM
Hi ,
You should use the "width" config for combo like:


items: [{
title: 'first',
layout: 'form',
items: [{
xtype: 'combo',
width:100,
fieldLabel: 'Test 1',
id: 'c1',
readOnly: true
}]
}, {
title: 'second',
layout: 'form',
items: [{
xtype: 'combo',
width:100,
fieldLabel: 'Test 2',
id: 'c2',
readOnly: true
}]
}]

Hope this code will work for you.