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


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



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.