There are several patterns for creating new UI components.
The one's I've identified so far are ..
  • No inheritance
  • Render UI using template (example is the recently blogged Audio control)
  • Inherit from Field types (Decorator and non Decorator cases)
  • Inherit from Container or Panel - Render UI using items array (static and non-static) containing nested xtypes.
  • ... I'm sure there are more ...
Each of these requires quite different coding patterns to construct and due to poor documentation you have a to chase all over the place to try and figure out and find the pattern you need. Since the recent ST 2.x class model changes the patterns have all changed. What we badly need in docs is coverage of each of the different patterns for creating custom components - and all in once place! This is so a beginner can identify the pattern they need and then code from a boilerplate example.

Bits of information are in the ExtJS docs for Components but its unclear how much of this applies to ST 2.x .

The docs also need a table or diagram summary of the firing sequence of events and what's expected in each override. If an override should call a parent, it need a summary of what to put to before and after the parent call. This should nail down best practice. The boiler plate code should have placeholder comment for each of these so you can just copy paste the pattern code and fill in the blanks. I think this would reduce the support cost on the forums and get everyone coding to the right patterns.

Note: I'm currently trying to find one for inheriting from a Container that renders using an initial items list that is adjusted in the constructor. Can't find any examples for ST 2.x . Recent Blog post on Component building is no use as its based on rendering templates.