css style in the ext js combo box - css

Question

My code:
{
border: 1,
bodyStyle: 'margin:0 0 0 140px;',
style: {
borderColor: 'black',
borderStyle: 'solid', //margin:'0 0 0 140' //margin-left: '140px' }, width: 140, name: 'comp', id:'compId', triggerAction: 'all', mode: 'local', store: new Ext.data.SimpleStore({
fields: ['myId', 'displayText'],
data: [
[1, 'item1'],
[2, 'item2']
]
}), displayField: 'displayText', xtype: 'combo',
},
here in ext js 2.3 bodyStyle is not getting appended to the combobox.Can anyone suggest how to resolve this?
Thanks

Answer 1

I think this could be what you need.
{
xtype: 'combo'
style : 'margin-left: 140px; border: solid black 1px;',
name: 'comp',
id:'compId',
triggerAction: 'all',
mode: 'local',
store: new Ext.data.SimpleStore({
fields: ['myId', 'displayText'],
data: [
[1, 'item1'],
[2, 'item2']
]
}),
displayField: 'displayText',
valueField : 'myId'
}
Note there is no bodyStyle config option according to the docs - http://docs.sencha.com/extjs/2.3.0/#!/api/Ext.form.ComboBox
I removed the width option as with the margin-left style attribute (also 140px) I thought you may end up with something odd looking.

Answer 2

combo.js :
{xtype:'combobox', cls:'combo'}
combo.css:
.combo .x-boundlist-selected {
background: #757575;
background-image: -webkit-linear-gradient(top, #757575, #474747);
background-image: -moz-linear-gradient(top, #757575, #474747);
background-image: -ms-linear-gradient(top, #757575, #474747);
background-image: -o-linear-gradient(top, #757575, #474747);
background-image: linear-gradient(to bottom, #757575, #474747);
border: solid #4e4e4e 2px;
color: #ffffff;
text-decoration: none;
}
.combo .x-boundlist-item {
background: #757575;
background-image: -webkit-linear-gradient(top, #757575, #474747);
background-image: -moz-linear-gradient(top, #757575, #474747);
background-image: -ms-linear-gradient(top, #757575, #474747);
background-image: -o-linear-gradient(top, #757575, #474747);
background-image: linear-gradient(to bottom, #757575, #474747);
border: solid #4e4e4e 2px;
color: #ffffff;
text-decoration: none;
}

Answer 3

this is one of the code that used bodyStyle atribute in 2.3 version
this may help you.
this.itemCombo= new Ext.form.ComboBox({
name : "combooo",
fieldLabel : "Status",
displayField : 'combo',
valueField : 'id',
mode : 'local',
triggerAction : 'all',
hiddenName : "comboo",
editable : false,
width : 100,
store : this.store,
value : "0"
});
this.frmPanel = new Ext.form.FormPanel({
bodyStyle : "padding:10px",
border : true,
autoScroll : true,
layout : "table",
layoutConfig : {
columns : 1,
style : "vertical-align:top"
},
items : [{
bodyStyle : "padding-right:10px",
xtype : "panel",
layout : "form",
border : false,
labelWidth : 110,
colspan : 2,
items : [this.item1,this.itemCombo]
}]
});