How to get an ExtJS ComboBox to display inline with text?

Question

I want to get the following to display in a single line. I have tried using styles float and display.

Show this input <input type="text" name="filterOp" id="filterOp"/> inline.


<script type="text/javascript">
    new Ext.form.ComboBox({
        applyTo: 'filterOp',
        triggerAction: 'all',
        name: 'item',
        mode: 'local',
        lazyInit: true,
        displayField: 'name',
        valueField: 'id',
        forceSelection: true,
        typeAhead: true,
        inputType:'text',
        fieldLabel: 'Item selection',
        style: "display: inline-block",
        store: new Ext.data.JsonStore({
            autoLoad: true,
            url: 'reporting/json_report_filter_operators.jsp',
            root: 'rows',
            fields:['id', 'name']
        })
    })

</script>

Steven de Salas Steven de Salas · Accepted Answer · 2010-11-22T00:27:07

The simplest way to do this is to override the styles on the page.

First, wrap your paragraph in a P tag with a special id.

<p id="my-inline-override">
  Show this input <input type="text" name="filterOp" id="filterOp"/> inline.
</p>

Then you can add a CSS selector to your page that makes sure the DIV tag added by Ext JS displays inline (note that "x-form-field-wrap" is the class of the inserted DIV wrapper, you can see this if you use chrome developer tools to browse the DOM).

<style>
#my-inline-override div.x-form-field-wrap {
    display: inline;
}
</style>

How to get an ExtJS ComboBox to display inline with text?

2 Answers