CODEWITHSUNDEEP
csscomboboxextjsinline
Artilheiro
Artilheiro

Reputation: 4005

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

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>

Upvotes: 3

Views: 5751

Answers (2)

Steven de Salas
Steven de Salas

Reputation: 21467

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>

Upvotes: 2

Macy Abbey
Macy Abbey

Reputation: 3887

I'm sorry, your question is a bit confusing. What exactly are you trying to get on a single line? The combo box? The code? Each item in the combo box? If it's each item just widen the combo box, or make each element have overflow hidden and a fixed width.

Upvotes: 0

Related Questions