Ext.ux.ClearableCombo.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. Ext.ns("Ext.ux");
  2. Ext.ux.ClearableCombo = Ext.extend(Ext.form.ComboBox, {
  3. trigger1Class: 'x-form-clear-trigger',
  4. trigger2Class: 'x-form-search-trigger',
  5. initComponent: function(){
  6. Ext.ux.ClearableCombo.superclass.initComponent.call(this);
  7. this.triggerConfig = {
  8. tag:'span', cls:'x-form-twin-triggers', cn:[
  9. {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
  10. {tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
  11. ]};
  12. },
  13. clearValue : function(){
  14. if(this.hiddenField){
  15. this.hiddenField.value = '';
  16. }
  17. this.setRawValue('');
  18. this.lastSelectionText = '';
  19. this.applyEmptyText();
  20. this.value = '';
  21. this.fireEvent('select', this, null, 0);
  22. },
  23. getTrigger: function(index){
  24. return this.triggers[index];
  25. },
  26. initTrigger: function(){
  27. var ts = this.trigger.select('.x-form-trigger', true);
  28. this.wrap.setStyle('overflow', 'hidden');
  29. var triggerField = this;
  30. ts.each(function(t, all, index){
  31. t.hide = function(){
  32. var w = triggerField.wrap.getWidth();
  33. this.dom.style.display = 'none';
  34. triggerField.el.setWidth(w-triggerField.trigger.getWidth());
  35. };
  36. t.show = function(){
  37. var w = triggerField.wrap.getWidth();
  38. this.dom.style.display = '';
  39. triggerField.el.setWidth(w-triggerField.trigger.getWidth());
  40. };
  41. var triggerIndex = 'Trigger'+(index+1);
  42. if(this['hide'+triggerIndex]){
  43. t.dom.style.display = 'none';
  44. }
  45. t.on("click", this['on'+triggerIndex+'Click'], this, {preventDefault:true});
  46. t.addClassOnOver('x-form-trigger-over');
  47. t.addClassOnClick('x-form-trigger-click');
  48. }, this);
  49. this.triggers = ts.elements;
  50. },
  51. onTrigger1Click: function() {
  52. this.clearValue();
  53. },
  54. onTrigger2Click: function() {
  55. this.onTriggerClick();
  56. }
  57. });