This example shows how to use the Styler ux to change the style of a feature. The Styler is made of 2 parts:
LayerStyleManager: This object is a manager that provides methods to set the current layer and/or current feature(s) being worked on. This manager contains Events that are fired when a style is changed. This object take the style from returned by the Styler and apply it to the layer or feature.
Styler: The Styler object is the type of styler displayed by the LayerStyleManager. This UX can contains many different stylers, from the simple style list in a combobox to a full fledged filter builder that includes a complex style creation tool. The only requirement is for the Styler to have a createLayout method that returns a ExtJS component and a change event that is used to return the Style or Rule to apply to the layer(s) or feature(s).
By using this concept, we could have many different representation of the Styler (complex, simple, with rules or not, etc.) and always use the same LayerStyleManager object to interact with them.
The js is not minified so it is readable. See feature-style-selector.js.