PDA

View Full Version : How to make the minWidth of combbox work?



leizz
2 Dec 2010, 12:49 PM
Hi,

I've been trying to make the minWidth setting work for ComboBox but it doesn't seem to have any effect. I also tried minListWidth and even boxMinWidth but none of them work.

My goal is to let the ComboBox adapt to the combined size constraint of 1) parent container layout; 2) length of list values; 3) the minimum or initial width.

Could anyone advise on this?

Thanks,
leizz

darthwes
2 Dec 2010, 8:06 PM
var myForm = new Ext.form.FormPanel({
baseCls: 'x-window',
items: [{
xtype: 'combo',
anchor: '100%',
fieldLabel: 'Test One',
mode: 'local',
triggerAction: 'all',
store: ['One', 'Two', 'Three']
},
{
xtype: 'combo',
width: 150,
fieldLabel: 'Test Two',
mode: 'local',
triggerAction: 'all',
listWidth: 'auto',
store: ['Short', 'Middling isnt it?', 'Exceedingly Long and Meaninglessly Pointless Text or String Whatever You Like']
},
{
xtype: 'combo',
fieldLabel: 'Test Three',
mode: 'local',
triggerAction: 'all',
store: ['One', 'Two', 'Three'],
//resizable: true,
value: 'One',
listWidth: 40
}]
});

var myWin = new Ext.Window({
title: "Badness",
width: 550,
height: 400,
border: false,
layout: 'fit',
items: myForm
});

Condor
3 Dec 2010, 4:34 AM
That makes the list size adjust to the content (sometimes, it's not a complete solution).

If you actually wanted to use all 3 constraints then you'll need to write this yourself (and override both initList and doResize).

leizz
3 Dec 2010, 6:36 AM
Thanks darthwes.

The code works well for Firefox but gives error for IE8 (all modes).


Message: Invalid argument.
Line: 7
Char: 30669
Code: 0
URI: http://localhost/ext-3.3.0/ext-all.js

Not sure if I need any special handling for IE when using Ext.

leizz

Condor
3 Dec 2010, 6:43 AM
listWidth:'auto' only works "by accident", so it's no wonder that it breaks on certain browsers.

Dynamically sizing to the content should be implemented in the code itself, because the browser isn't able to do it correctly itself.

leizz
3 Dec 2010, 6:44 AM
Hi Condor,

I'd like the combo boxes on a form to have the following behavior:

1. Have a uniform initial width:
if list entries are short, this initial width applies;
2. Allows wider list entries to go beyond the initial width, to avoid being truncated, but,
3. Limit the max width of the combo (or list entries) to respect parent container's width setting.

I thought this should be a standard feature, isn't it?

Thanks,
leizz

Condor
3 Dec 2010, 6:58 AM
No, sorry. Would it be an option to always use a fixed listWidth and modify the css so it does line wrapping?

leizz
3 Dec 2010, 8:57 AM
Thanks Condor. I'll try the css approach to see if it look good when some list entries wrap.

leizz

dekely
29 Dec 2010, 8:16 AM
This also works for me, add an expand listeners to your combo



listeners: {
expand: function(combo) {
if(combo.calculated){
return;
}
var length = this.innerList.dom.childNodes.length;
var max = 0;
for (var i = 0; i < length; i++) {
max = Math.max(this.innerList.dom.childNodes[i].offsetWidth, max);
max = Math.max(this.minListWidth, max);
}
max += 15;
this.list.setWidth(max);
this.innerList.setWidth(max - this.list.getFrameWidth('lr'));

combo.calculated = true;
}
}

leizz
30 Dec 2010, 7:58 AM
Thanks Dekel!

That's an interesting idea. I'll give it a try. I guess it would be better to extend the combo class?

leizz

dekely
30 Dec 2010, 1:09 PM
Yes, if you wish to use this solution across the application.