如何获取ExtJS ComboBox与文本内联显示？ [英] How to get an ExtJS ComboBox to display inline with text?

问题描述

我想得到以下内容显示在一行。我已经尝试使用样式float和显示。

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>

推荐答案

最简单的方法是重写页面上的样式。

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

首先，将您的段落包含在具有特殊ID的P标签中。

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>

然后你可以添加一个CSS选择器到你的页面，确保Ext JS显示添加的DIV标签inline（请注意，x-form-field-wrap是插入的DIV包装器的类，如果您使用chrome开发者工具浏览DOM，可以看到这一点）。

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>

这篇关于如何获取ExtJS ComboBox与文本内联显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！