Combo box placed next to the textfield using extjs

Question

My code:

var mpanel = new Ext.Panel({
        baseCls: 'x-plain',
        //layout: 'anchor',
        width: 290,
        height: 500,
        items: [{
            {
                width: 140,
                border: 1,
                readOnly: true,
                value: "combovalue",
                style: {
                    borderColor: 'black',
                    borderStyle: 'solid',
                    float: 'left'
                },
                xtype: 'textfield',

            }, {

                name: 'comp',
                id: 'compId',
                bodyStyle: 'margin-left:140px'
                triggerAction: 'all',

                mode: 'local',
                store: new Ext.data.SimpleStore({

                    fields: [
                        'myId',
                        'displayText'
                    ],
                    data: [
                        [1, 'item1'],
                        [2, 'item2']
                    ]
                }),

                displayField: 'displayText',
                xtype: 'combo',

            }]
        })

here I want textfield of width 140px and next to it I want to place combobox so i have included css margin-left:140px but style is not getting appended.

How to resolve this?

Answer 1

Wrap both fields in a HBox layout, place the textfield left (first item), and the combo right (second item). Do not forget to remove all styling you have put in css or "style" config option.