Sencha Touch - How to implement optgroup

Question

Is there a way to separate the options of a Sencha Touch select list similar to using optgroups? I have options that need to appear like they are grouped under a few different headings. In regular HTML markup it would look something like:

<select>
  <optgroup label="First Group">
    <option value="A">OptionA</option>
    <option value="B">OptionA</option>
    <option value="C">OptionA</option>
  </optgroup>
  <optgroup label="Second Group">
    <option value="D">OptionA</option>
    <option value="E">OptionA</option>
    <option value="F">OptionA</option>
  </optgroup>
</select>

Thanks for your time in advance!

Answer 1

There isn't any way to do this out of the box, however a selectfield is built on and extends the true List component which does have grouping/header functionality. You can force a selectfield to use the list overlay style (Ext.List) instead of the docked spinner style (Ext.picker.Picker) by setting usePicker to false. You can also set the defaultTabletPickerConfig config and provide an object with an items property. In the items set up a single item with an xtype of list, and go wild setting up whatever list component configuration you want (including your grouping/headers).

Take a look at the documentation for these properties under Ext.field.Select.