CODEWITHSUNDEEP
extjsextjs3
Ash Eldritch
Ash Eldritch

Reputation: 1514

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
                {},
                {},
                {},
            ]
        },
        ...
    ]
});

Upvotes: 1

Views: 231

Answers (1)

Brian Moeskau
Brian Moeskau

Reputation: 20429

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.

Upvotes: 2

Related Questions