How to display horizontal scroll bar in ExtJS ComboBox ?

Question

A combo's drop-down list gets the size of the Combo, and display of items with longer text just gets cropped.

I tried fiddling with Ext's CSS for combos with no luck.

Does anyone know how it can be done ?

Using ExtJS 3.2.0.

EDIT: Alternative solutions to improve usability will also be appreciated, e.g. getting the list to expand with the content.

Answer 1

I don't know how you can add a scroll bar, but I know that you can change the list width with the well-named property :

listWidth : Number

The width (used as a parameter to Ext.Element.setWidth) of the dropdown list (defaults to the width of the ComboBox field). See also minListWidth

For an horizontal scroll, it would need lots of changes, because the list container width is forced, so "overflow" attributes in css are useless.

Edit : Another method

You can add this custom css, for me it seems to work well, as wrapping long lines.

.x-combo-list-item  {
  white-space:normal;
}

Of course, if you add this it will apply to all combos' lists.

You can set listClass : 'x-combo-list-wrap' on your Ext.form.ComboBox, and then apply the css only to these items :

x-combo-list-wrap .x-combo-list-item  {
  white-space:normal !important;
}

(I'm not sure the !important is useful here, not tested)