Resize Ext.form.ComboBox to fit its content - combobox

Question

There are quite few solutions on Ext forums, but I wasn’t able to get any of them work. It seems I am missing something minor.
I need to resize combobox to fit its content when it’s first created. I do not need to worry about resizing it when content is changing.
Is there any working examples using Extjs 3.2?
Current Code:
var store = new Ext.data.ArrayStore({
fields: ['view', 'value', 'defaultselect'],
data: Ext.configdata.dataCP
});
comboCPU = new Ext.form.ComboBox({
tpl: '<tpl for="."><div class="x-combo-list-item"><b>{view}</b><br /></div></tpl>',
store: store,
displayField: 'view',
width: 600,
typeAhead: true,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
editable: false,
emptyText: 'empty text',
selectOnFocus: true,
listeners: { select: AdjustPrice, change: AdjustPrice, beforeselect: function (combo, record, index) { return ('false' == record.data.disabled); } },
applyTo: 'confelement'
});
I've also tried removing width: 600 and replacing it with minListWidth: 600 but that result following and didnt fix the issue.
alt text http://img28.imageshack.us/img28/7665/4272010105134am.png

Answer 1

Try the following:
Determine the list-box option with the most chars
Create a div and set the option with the most chars
Append this div to the body
Get the div's clientWidth
Below codes works in ExtJs 3.2!
myStore = new Ext.data.Store({
...
listeners : {
load: function() {
var maxValue = "";
var charLen = 0, maxCharLen = 0;
var maxListWidth = 300;
/**
* This is a work-around since the 'listWidth' property
* does not accept any values that would simulate auto-resize
* in reference to the category with the most characters.
*/
this.data.each(function(item, index, totalItems ) {
var nameValue = item.data['name']; // 'name' is the field name
if(nameValue == null || nameValue == ''){
// do nothing
}else {
charLen = nameValue.length;
if(charLen > maxCharLen){
maxCharLen = charLen;
maxValue = nameValue;
}
}
});
if(maxValue != ""){
var divEl = document.createElement('div');
divEl.id = 'tempEl';
divEl.style.display = "inline";
divEl.className = "x-combo-list";
divEl.innerHTML = maxValue;
document.body.appendChild(divEl);
// check if appended
divEl = document.getElementById('tempEl');
if(divEl) {
var divWidth = divEl.clientWidth;
if(divWidth == 0 ) {
divEl.style.display = "inline-block";
divWidth = divEl.clientWidth;
}
// the allocated width for the scrollbar at side of the list box
var scrollbarWidth = 30;
// make sure that column width is not greater than
if((divWidth + scrollbarWidth) > maxListWidth) {
maxListWidth = divWidth + scrollbarWidth;
myCombo.listWidth = maxListWidth;
}
document.body.removeChild(divEl);
}
}
}
});
var myCombo = new fm.ComboBox({
...
});

Answer 2

try
autoWidth: true
and remove the width parameter

Answer 3

width: 600 is correct, so you must have some other issue going on that's not obvious from what you posted. You might try removing the applyTo config and instead put renderTo: Ext.getBody() just to see if it has something to do with how it's applied to your element. Are you sure there is not some other code that could be affecting the width?

Answer 4

Found here:
// throw this stuff in a closure to prevent
// polluting the global namespace
(function(){
var originalOnLoad = Ext.form.ComboBox.prototype.onLoad;
Ext.form.ComboBox.prototype.onLoad = function(){
var padding = 8;
var ret = originalOnLoad.apply(this,arguments);
var max = Math.max(this.minListWidth || 0, this.el.getWidth());
var fw = false;
Ext.each(this.view.getNodes(), function(node){
if(!fw){ fw = Ext.fly(node).getFrameWidth('lr'); }
if(node.scrollWidth){ max = Math.max(max,node.scrollWidth+padding); }
});
if( max > 0 && max-fw != this.list.getWidth(true) ){
this.list.setWidth(max);
this.innerList.setWidth(max - this.list.getFrameWidth('lr'));
}
return ret;
};
})();