1

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
                {},
                {},
                {},
            ]
        },
        ...
    ]
});
  • 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.
Community
  • 1
  • 1
Ash Eldritch
  • 1,504
  • 10
  • 13

1 Answers1

2

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.

Brian Moeskau
  • 20,103
  • 8
  • 71
  • 73
  • Thanks bmoeskau. That's along the lines I was thinking. I've +1 but not accepted as answer for now because I'd like to elicit some more ideas. – Ash Eldritch Jul 13 '11 at 02:54
  • This is a bit nicer, but still does not solve the problem of the file growing to be hundreds of lines in size. – sym3tri Jul 13 '11 at 02:58
  • @sym3tri, did you read my answer? You can "even include the sub-configs in separate files". It's JavaScript. As long as things are defined in the proper order, it doesn't matter how many different physical files you define them in. Note that you should still be building down to one file for deployment. – Brian Moeskau Jul 13 '11 at 09:20
  • @bmoeskau sorry, missed that part. – sym3tri Jul 14 '11 at 03:05