5

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!

Kyle Magilavy
  • 767
  • 6
  • 9
  • 1
    you have to create xtemplate for it under the 'tpl' config, I came across a tpl but its for ExtJs and not working in ST2.. m trying figuring out what can be done – 1Mayur Mar 20 '13 at 05:59
  • Can you share the code/fiddle to show how you implemented @OhmzTech suggestion? – ThinkFloyd Mar 22 '13 at 11:12
  • @Kyle Just had someone link me here when they were trying to do option grouping...kind of funny! – JoshBerke Jun 06 '14 at 17:27

1 Answers1

3

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.

OhmzTech
  • 897
  • 1
  • 5
  • 7