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

Posted 2023-02-26

【中文标题】组织一个很长的 ExtJS 项目配置（包含许多嵌套项目）都有哪些好的方法？

【英文标题】：What are some good approaches to organizing a very long ExtJS item config, containing many nested items?组织一个很长的 ExtJS 项目配置（包含许多嵌套项目）有哪些好的方法？

【发布时间】：2011-07-11 09:45:49

【问题描述】：

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

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 的“生成器”函数中，乍一看似乎是一种合理的方法。

【参考方案1】：

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

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

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

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

您可以根据需要对其进行细化，甚至将子配置包含在单独的文件中（尽管这种类型的方案在 Ext 4 下不能很好地用于动态加载）。根据配置的性质，生成器或工厂函数也可能有意义。原则上，这两种方式都是一样的——只需将子配置分成更小的块并根据需要使用它们。

【讨论】：

谢谢 bmoeskau。这和我想的一样。我已经 +1，但现在没有被接受为答案，因为我想引出更多想法。

这样更好一些，但仍然没有解决文件增长到数百行大小的问题。

@sym3tri，你看我的回答了吗？您甚至可以“甚至将子配置包含在单独的文件中”。它是 javascript。只要以正确的顺序定义事物，您在多少个不同的物理文件中定义它们并不重要。请注意，您仍应构建为一个文件以进行部署。

@bmoeskau 抱歉，错过了那部分。