ExtJs自定义Picker的Combobox随机折叠问题技术求助

Hey there, let's tackle this annoying combo collapse problem you're dealing with—especially since it worked fine in 6.2.0.589. These kinds of issues almost always boil down to changes in ExtJS's event bubbling or collapse-trigger logic between versions. Here's how to fix both scenarios:

Scenario 1: Combo collapses when clicking anywhere outside toolbar buttons #

The root cause here is likely that newer ExtJS versions adjusted how global mousedown or component blur events are handled, and your custom picker isn't stopping those events from triggering the combo's default collapse behavior.

Try these fixes:

• Add a mousedown listener to your custom picker to block event propagation. This prevents the click from bubbling up to the combo's parent logic that triggers collapse:

  Ext.define('MyApp.ux.CustomPicker', {
      extend: 'Ext.picker.Picker',
      // Your existing config here...
      listeners: {
          mousedown: function(picker, e) {
              // Stop the event from reaching the combo's collapse triggers
              e.stopEvent();
          }
      }
  });
  

• Double-check your combo's collapseOnBlur config. If you don't want the combo to collapse when clicking outside entirely, set it explicitly to false. But if you need it to collapse when clicking other components (just not your picker), stick with the event blocking method above.

Scenario 2: Combo collapses when clicking the tooltip or "do NOT collapse" checkbox #

This happens because the click events from the checkbox and tooltip are leaking into the combo's collapse event chain. Here's how to isolate them:

1. For the checkbox: Add a click listener to stop the event from propagating:

   Ext.create('Ext.form.field.Checkbox', {
       boxLabel: 'do NOT collapse combo on click',
       listeners: {
           click: function(cb, e) {
               e.stopPropagation();
               // Uncomment below if you need to block default checkbox behavior too
               // e.preventDefault();
           }
       }
   });
   

2. For the tooltip: Since tooltips render to a global container, their clicks trigger global mousedown listeners that the combo responds to. Block this by adding a mousedown handler to the tooltip's element after it renders:

   Ext.create('Ext.tip.ToolTip', {
       target: 'show-tooltip-btn',
       html: 'Your tooltip content',
       listeners: {
           render: function(tip) {
               tip.getEl().on('mousedown', function(e) {
                   e.stopEvent();
               });
           }
       }
   });
   

3. Quick sanity check: Make sure your custom picker's ownerCt is properly linked to the combo. A misconfigured owner reference can cause ExtJS to misinterpret which events should trigger collapse.

Bonus Debugging Tips #

• Compare the Ext.form.field.ComboBox source code between 6.2.0.589 and your current version. Focus on the collapse method, onBlur, and onMouseDown handlers—version differences here are almost certainly the culprit.
• Use your browser's dev tools to inspect event listeners on the combo and picker. You can trace exactly which event is triggering the collapse to narrow down the fix even further.

内容的提问来源于stack exchange，提问作者Andrei Ille