How to get ExtJS ComboBox to display inline text?

Question

I want the following to appear on one line. I tried using float and display styles.

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>

Answer 1

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

First, leave your paragraph in the P tag with a special identifier.

<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 to make sure that the DIV tag added by Ext JS displays the inline string (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 view the DOM).

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

Answer 2

, . ? ? ? ? .