What are some good approaches to organizing a very long ExtJS item config, containing many nested items?

The specific example would be a "preferences" window that has a series of tabs, each of which contains a series of form fields. None of these tabs or form fields would be reused outside of the window, and there would only ever be one instance of the window itself. Using a single item config means it's hundreds of lines long, making it hard to maintain.

My.Ns.PreferencesWindow = Ext.extend(Ext.Window, {

    items: [
        // A tab
        {
            items: [
                // Form fields
                {},
                {},
                {},
            ]
        },
        // A tab
        {
            items: [
                // Form fields
                {},
                {},
                {},
            ]
        },
        ...
   开发者_如何学C ]
});

• I am not asking how to organize a large ExtJS application. I have read Best Way to Organize an ExtJS Project and Saki's blog posts on the topic.
• It doesn't really make sense to Ext.extend for each of the items, because they're not going to be instantiated more than once.
• Encapsulating the various components in "generator" functions that just return an item's json seems at first glance to be a reasonable approach.

---

Just use variables to make it more readable:

var tabOneCfg = {
    items: [
        // etc.
    ]
};

var tabTwoCfg = {
    items: [
        // etc.
    ]
};

My.Ns.PreferencesWindow = Ext.extend(Ext.Window, {
    items: [
        tabOneCfg,
        tabTwoCfg
    ]
});

You can make it as granular as you want, and even include the sub-configs in separate files (although that type of scheme would not play well with dynamic loading under Ext 4). A generator or factory function could make sense as well, depending on the nature of the configs. In principle it's the same thing either way -- just break the sub-configs into smaller chunks and use them as needed.