Question

具体示例是“首选项”窗口，其中包含一系列选项卡，每个选项卡都包含一系列表单域。这些选项卡或表单字段都不会在窗口外重用，并且窗口本身只会有一个实例。使用单个项目配置意味着它长达数百行，这使得难以维护。

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

    items: [
        // A tab
        {
            items: [
                // Form fields
                {},
                {},
                {},
            ]
        },
        // A tab
        {
            items: [
                // Form fields
                {},
                {},
                {},
            ]
        },
        ...
    ]
});

我不是在问如何组织一个大的ExtJS应用程序。我已阅读Best Way to Organize an ExtJS Project和Saki's blog posts on the topic。
对每个项目的Ext.extend没有任何意义，因为它们不会被多次实例化。
在“生成器”函数中封装各种组件，只返回项目的json，乍一看似乎是一种合理的方法。

Answer 1

只需使用变量使其更具可读性：

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

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

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

您可以根据需要将其设置为粒度，甚至可以将子配置包含在单独的文件中（尽管这种类型的方案在Ext 4下的动态加载时效果不佳）。根据配置的性质，发电机或工厂功能也可以有意义。原则上它也是一样的 - 只需将子配置分成更小的块并根据需要使用它们。

组织一个包含许多嵌套项目的非常长的ExtJS项目配置有哪些好的方法？

1 个答案: