8159

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>

Answer1:

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.

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>

Answer2:

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.

Recommend

  • How to solve encoding problems when using strange characters of titles in JSF and Primefaces
  • ExtJS String to Combobox
  • ExtJS 5 combobox - submitting both value and text
  • How to build rule exist in or equal to a number in cakephp 3?
  • Ext JS Dependent combo box
  • Sencha ExtJS Submit two values
  • trigger the typeahead event programmatically using jquery
  • extjs 4 combobox , How to disabled tab and enter key
  • jquery-typeahead hide suggestion box on choosing an entry
  • ExtJS 4 - How to display template having width greater than the width of combo-box?
  • Moving focus from one EditText to another
  • Why I can't enforce EditTextPreference to take just numbers?
  • How to disable items in a combobox in Ext JS?
  • Extjs ComboBox doesn't pick the correct value when setValue is called
  • I want to bind the click event to the li elements in the xpages type-ahead
  • JSF binding with setValueExpression read-only?
  • How do I get HTML corresponding to current DOM tree?
  • PHP buffered output depending on server setting?
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Align navbar back button on right side
  • HTML download movie download link
  • Modifying destination and filename of gulp-svg-sprite
  • How to handle AllServersUnavailable Exception
  • How to model a transition system with SPIN
  • How to show dropdown in excel using jrxml (jasper api)?
  • VBA Convert delimiter text file to Excel
  • ORA-29908: missing primary invocation for ancillary operator
  • How to disable jQuery.jplayer autoplay?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How to stop GridView from loading again when I press back button?
  • Bitwise OR returns boolean when one of operands is nil
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • How to push additional view controllers onto NavigationController but keep the TabBar?