Advanced Search

[ExtJS] Automatically resize Ext.form.CombBox to fit its content

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function resizeToFitContent() {
  2. 	if (!this.elMetrics)
  3. 	{
  4. 		this.elMetrics = Ext.util.TextMetrics.createInstance(this.getEl());
  5. 	}
  6. 	var m = this.elMetrics, width = 0, el = this.el, s = this.getSize();
  7. 	this.store.each(function (r) {
  8. 		var text = r.get(this.displayField);
  9. 		width = Math.max(width, m.getWidth(text));
  10. 	}, this);
  11. 	if (el) {
  12. 		width += el.getBorderWidth('lr');
  13. 		width += el.getPadding('lr');
  14. 	}
  15. 	if (this.trigger) {
  16. 		width += this.trigger.getWidth();
  17. 	}
  18. 	s.width = width;
  19. 	this.setSize(s);
  20. 	this.store.on({
  21. 		'datachange': this.resizeToFitContent,
  22. 		'add': this.resizeToFitContent,
  23. 		'remove': this.resizeToFitContent,
  24. 		'load': this.resizeToFitContent,
  25. 		'update': this.resizeToFitContent,
  26. 		buffer: 10,
  27. 		scope: this
  28. 	});
  29. }
  30.  
  31. var combo = new Ext.form.ComboBox({
  32. 	//combobox config...
  33. 	config: ''
  34. });
  35.  
  36. combo.on('render', resizeToFitContent, combo);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.