PDA

View Full Version : ComboBox with autoListWidth calculation



devnull
12 Nov 2007, 3:27 PM
I needed to have comboBoxes that dynamically resized their listWidths to the longest item loaded, so i came up with this override. I thought it might be usefull to others.
just give the combo a 'autoListWidth' property value that evaluates to true.
It is not terribly efficient so I would avoid using it with large lists.
Possible enhancements would be to make it only work with remote stores, and only calculate the width when the store is [re]loaded (it currently calculates the width each time the list is expanded).
I am not terribly interested in making these enhancements as it is just a quick hack for me until our app is rolled over to 2.0 (I will create something more elaborate for 2.0).


Ext.override(Ext.form.ComboBox,{
onLoad : function(){
if(!this.hasFocus){
return;
}

if(this.store.getCount() > 0){
if (this.autoListWidth){
if(!this.metrics){
this.metrics = Ext.util.TextMetrics.createInstance(this.el);
}
this.store.each(function(record){
var v = record.get(this.displayField) + " ";
var w = Math.min(this.growMax, Math.max(this.metrics.getWidth(v) + /* add extra padding */ 20, this.growMin));
if (w > this.innerList.getWidth()) {
this.innerList.setWidth(w);
this.list.setWidth(w);
}
},this)
}
this.expand();
this.restrictHeight();
if(this.lastQuery == this.allQuery){
if(this.editable){
this.el.dom.select();
}
if(!this.selectByValue(this.value, true)){
this.select(0, true);
}
}else{
this.selectNext();
if(this.typeAhead && this.lastKey != Ext.EventObject.BACKSPACE && this.lastKey != Ext.EventObject.DELETE){
this.taTask.delay(this.typeAheadDelay);
}
}
}else{
this.onEmptyResults();
}
}
})