extjs - to initComponent() or not to initComponent()

Question

I struggle when building an app in ExtJS 4, and part of that is confusion on when to configure something in initComponent() and when not to...

For example, in Sencha's own MVC Application Architecture doc, when first creating the grid view, they defined the inline store in the initComponent() method. (See "Defining a View" section)

Further down, when they factored out the store into a separate class, they moved the definition outside of initComponent(). There is a helpful comment that draws attention to this fact, but there is no explanation. (See Creating a Model and Store section)

I guess the reason is supposed to be obvious, but I'm missing it. Any pointers?

Answer 1

If you do not have a deep understanding of how ExtJS class system work, you may want to follow this:

Declare all non-primitive types in initComponent().

Terminology

• Primitive types - strings, booleans, integers, etc.
• Non-Primitives - arrays & objects.

Explanation

If the component you extend is to be created more than once, any non-primitive configs declared as a config option (outside initComponent) will be shared between all instances.

Because of this, many people experienced issues when an extended component (typically an extended grid) is created on more than one tab.

This behaviour is explained in sra's answer below and in this Skirtle's Den article. You may also want to read this SO question.