View Full Version : Help with Dynamic ComboBoxes, Multiple Dropdown Arrows?

14 Apr 2011, 10:16 AM
Hello All,
We seem to be having an issue that we cant figure out with a Dynamically created set of combo boxes.
As you can see from the image attached, each of the combo boxes has 6 drop down arrows.
I am kind of at a loss as to what is going wrong here.


Bellow is the code that creates the combo boxes, which is fairly simple.
It loops through the store. if the datatype is a "list" it creates a combobox (there are other types, but they work fine)
I appologize for the sloppily formated code, it is not cooperating with me after I copy and pasted into here.

store.each(function (rec) {
var pdataid = rec.get('pdataid');
var datalabel = rec.get('datalabel');
var datavalue = rec.get('datavalue');
var datacol = rec.get('datacol');
var fotoid = rec.get('fotoid');
var datatype = rec.get('datatype');
var mapid = rec.get('mapid');
//alert(datalabel+" yoda");
// alert(datatype+' - '+datalabel)
//---- start list
if (datatype === 'list') {
Ext.getCmp("foto_fp_id").add(new Ext.form.ComboBox({
fieldLabel: datalabel
,id: "pid_"+mapid
,triggerAction: 'all'
,valueField: 'lxvalues'
,displayField: 'lxvalues'
,store: photocritcomboStore
,listeners: {
focus: function () {
photocritcomboStore.proxy = new Ext.data.HttpProxy({
url: 'data/common/dss_data.php?text=photocritlist&field='+datacol+'&fotoid='+fotoid+'&mapid='+mapid
// photocritcomboStore.reload({
// method: 'GET',
// params: {
// //fotoid: fotoid,
// //field: datacol,
// pdataid: pdataid,
// // text: 'photocritlist'
// }
// });
}//end focus
}//end listeners


So Anyone have any idea whats going on here? /:)
We've been trying to figure this out for 2 days now.


14 Apr 2011, 10:32 AM
This is just a WAG (Wild A$$ Guess), but try temporarily commenting out the 'focus' listener on the dynamically added ComboBox and see if that makes any difference.

14 Apr 2011, 10:35 AM
No dice. :((
Side note: They need the smily of the guy beating his head against the wall.

14 Apr 2011, 10:54 AM
Can you supply more of the surrounding code, specifically the layout/events of the parent container into which the Combos are rendered?

14 Apr 2011, 10:55 AM
Ok - I think I have been able to narrow it down to an issue within the lightbox.js file that we use.
These form panels actually sit inside of a 'lightbox'. Anywhere I render the comboxes to inside the lightbox - they fail miserably the way the do in the picture. If I render them using the exact same code outside to another element they are fine.

I am going to guess it boils down to some Odd CSS, but does anyone have any idea where to start hunting? I have no idea what kind of CSS elements could cause anything like that. :-/

14 Apr 2011, 11:13 AM
Firefox with Firebug add-on is your friend. Click on the 'Inspect' arrow, then the component of interest in the page and the 'Style' tab will show you every single bit of CSS style(s) applied and/or overridden.

14 Apr 2011, 11:15 AM
Firebug and I are good friends :D
CSS and I are not ;)

14 Apr 2011, 11:30 AM
By removing a set of CSS in lightbox.css

#ux-lightbox img {
width: 60%;
height: 60%;
/*z-index: 5;
/*position: relative;
top: 295px;*/

once that was gone we don't seem to have any issues. I assume because the drop down arrows for the Combo Box are 'images' they get the same CSS treatment. =P~