PDA

View Full Version : ComboBox and GridPanel Toolbar



stevek
28 Apr 2010, 4:16 PM
hey guys,
please have a look at the screenshot (attachment) I have - has anyone else experienced this problem? I am seeing this problem in IE7 - the combobox dropdown button is like 1 - 2 pixels higher than the actually dropdown box (of values) - in FF3 it renders perfectly. here's my code that does this:




hcbox = new Ext.form.ComboBox({
editable: false,
store: [
['unprocessed', 'Unprocessed cases'],
['in_contact', 'Cases in contact'],
['closed', 'Closed cases']
],
triggerAction: 'all'
});

hcgrid = new Ext.grid.GridPanel({
tbar: new Ext.Toolbar({
items: [
{
text: 'List type:',
xtype: 'label'
},
{xtype: 'tbspacer'},
hcbox
]
})
});
any help would be appreciated.
thanks.

stevek
28 Apr 2010, 5:55 PM
hi guys,
i found the culprit. in the 'resources/css/ext-all.css, the following style block:



.x-form-field-wrap .x-form-trigger{
width:17px;
height:21px;
border:0;
background:transparent no-repeat 0 0;
cursor:pointer;
border-bottom: 1px solid;
position:absolute;
top:0;
}


top: 0 in FF renders the form trigger properly, but not in IE6/7 (it causes the button to be 1px below the dropdown) - but if i change the top: 1, then IE is fine, but not FF (now the form trigger is a bit lower. how can i make it so that according to the specific browser, the top can either be a 1 (IE) or a 0 (for everything else)?

thanks.

stevek
28 Apr 2010, 6:36 PM
i tried using the triggerClass config, but no go there.
i tried...



...
triggerClass: 'x-form-trigger-IE'


but that didn't work - i created this style in my jsp page, putting top:1 - but no go there! help!!!
thanks.

cnelissen
28 Apr 2010, 7:01 PM
Perhaps try adding a style like:

.ext-ie .x-form-field-wrap .x-form-trigger{
top:1 px !important;
}

stevek
28 Apr 2010, 7:58 PM
hi clint,
i tried that - it worked!

thank you very much. greatly appreciated.