Extjs Ext.ComboBox automatically handles existing content
I have a problem when applying Ext.ComboBox to an existing html select element , even if the existing content makes the html selection around 20px (without it the static width), Ext.ComboBox will resize to default, large and wide. Is there a way to automatically resize Ext.ComboBox based on existing items and without using the default width?
Even though I know which is the best Ext tool, this issue will allow my colleagues to ditch Extjs.
Thank you in advance
source to share
You can't technically do an "auto width" combo - Ext actually converts <select>
to a normal one <input>
behind the scenes, and the elements <input>
must have width / size. However, you can trick Ext into sizing a combo based on an existing one <select>
, which should give you the same end result. Here's an example from the Ext demos page where I changed the width config value :
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'state',
width: Ext.fly('state').getWidth(),
forceSelection:true
});
The obvious caveat is that if you subsequently resize the list after rendering it, the combo will not automatically resize and you will have to figure out how to resize it yourself.
source to share
Use this code:
Ext.ux.ResizableComboBox = Ext.extend(Ext.form.ComboBox, {
initComponent: function(){
Ext.ux.ResizableComboBox.superclass.initComponent.call(this);
this.on('render', this.resizeToFitContent, this);
},
resizeToFitContent: function(){
if (!this.elMetrics){
this.elMetrics = Ext.util.TextMetrics.createInstance(this.getEl());
}
var m = this.elMetrics, width = 0, el = this.el, s = this.getSize();
this.store.each(function (r) {
var text = r.get(this.displayField);
width = Math.max(width, m.getWidth(text));
}, this);
if (el) {
width += el.getBorderWidth('lr');
width += el.getPadding('lr');
}
if (this.trigger) {
width += this.trigger.getWidth();
}
s.width = width;
this.setSize(s);
this.store.on({
'datachange': this.resizeToFitContent,
'add': this.resizeToFitContent,
'remove': this.resizeToFitContent,
'load': this.resizeToFitContent,
'update': this.resizeToFitContent,
buffer: 10,
scope: this
});
}
});Ext.reg('resizable-combo', Ext.ux.ResizableComboBox);
source to share
add listener to afterrender event and set width if list (div that is falling) automatically, eg.
afterrender: function(combo){
combo.list.setSize('auto', 0);
combo.innerList.setSize('auto', 0);
}
The reason I am using afterrender and not render is because if you set lazyInit to false it will set the width of the list, so in afterrender you override this setWidth
source to share
I'm pretty sure you can get ExtJs to render whatever HTML elements you want the way you want them to appear.
here's some code from Examples / Form / Combos.js file :
var converted = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'state',
width:20, //<-- set this config value!
forceSelection:true
});
in the code you use to convert the combo, just specify the width to compile ExtJs.
source to share