View Full Version : How does ComboBox's dropdown disappear when its parent panel is hidden?

12 Sep 2010, 11:58 AM
I am writing a combo box-like component that uses a grid rather than a data list to display the data. The reason for this is two-fold: first, I need to display data from five fields in the text field as one string, and, second, I need to preserve the text field's content so that the user's selection is not messed up by searching the grid. It seemed too difficult for the effort of modifying the existing ComboBox, so I started my own component.

However, I have hit a snag. If I expand my combo box, then navigate to a different tab than the one holding my combo box, the layer holding the grid remains visible, hiding everything beneath it. Obviously, this is not how the ComboBox's layer functions; when its parent is hidden, somehow, the layer is given the CSS property "visibility: hidden", and its absolute coordinates are changed to be well offscreen.

How does this happen? I have plowed through ext-all-debug.js, trying to find the reason, and I cannot see it. I've tried watching for events to catch in Firebug, but nothing is fired when the component is hidden. I've tried intercepting my component's hide function with hiding the layer, too, but it is never called.

How does this work, and how can I duplicate it?

12 Sep 2010, 12:01 PM
Use a ComboBox with a custom template.

12 Sep 2010, 12:07 PM
That was a quick response : )

I tried that. It was easy to display the values properly in the dropdown list. The problem was that I could not get the text field to display the string that the template compiled; the ComboBox is designed to display only one field's value as its text. I did not see any easy way to make it so that it could "render" the value properly, so I tried what seemed easier at the time.

I am open to alternate solutions, but even if I am given a good one, I am still curious to know how this happens. Any trick I learn may prove useful in the future...

12 Sep 2010, 12:19 PM
Change the autoCreate to create a DIV.

Change the setRawValue to put whatever you want into the div.

Don't forget to have a hiddennName to hold the ID.

13 Sep 2010, 12:41 PM
Attempting to use the stock ComboBox is introducing a whole set of problems without solving any of the old ones. For example:

- The ComboBox makes the query twice.
- Any attempt to write a load listener for the store fails, because it gets called twice (once for each query) with different arguments each time.
- I need load listeners so I can control the loading; I have my system set up so any query can return portal-relevant information. I have the portal process all responses before forwarding them to the requesters. This means that I need to sync the paging toolbar and the dataview to my managed loading as opposed to the normal load call.
- I need to have different fields for displaying the current selection and typing a search string. All I have for sending search queries is Saki's Ext.ux.grid.Search, which does everything I want (especially the ability to search by column) except that it requires a grid to work.
- After everything else, I need to be able to add a "clear selection" button to the combo so I can eliminate the selection.

These are all problems that my grid-based solution avoids, and my efforts to customize the ComboBox are proving frustrating at best. Is there any way to simply add the finishing touch to what I have (mostly) working as opposed to wrestling with what seem ancillary problems to do things the "right" way?

28 Sep 2010, 11:45 AM
Bump. Does anyone know how the selection DataView magics itself away when a ComboBox's parent component is hidden?

28 Sep 2010, 11:50 AM
Just guessing, but hideMode: 'offsets'?