PDA

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



Kcarpenter
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.

25636

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.removeAll();
photocritcomboStore.proxy = new Ext.data.HttpProxy({
url: 'data/common/dss_data.php?text=photocritlist&field='+datacol+'&fotoid='+fotoid+'&mapid='+mapid
});
photocritcomboStore.reload();
// 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.

Thanks,
Karl

Screamy
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.

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

Screamy
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?

Kcarpenter
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. :-/

Screamy
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.

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

Kcarpenter
14 Apr 2011, 11:30 AM
FIXED!
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~