JavaScript [ExtJS]自动调整Ext.form.CombBox的大小以适应其内容

Posted 2021-05-19

function resizeToFitContent() {
	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
	});
}

var combo = new Ext.form.ComboBox({
	//combobox config...
	config: ''
});

combo.on('render', resizeToFitContent, combo);