javascript - ExtJs 4 ViewPort 与带有边框布局的面板 - 使用哪个以及为什么？

Question

我已经开始使用 ExtJs 4 开发一个新应用程序。我是 ExtJs 的新手。读完ExtJs教程后，我觉得Panel和ViewPort几乎是一样的。然而，一次只有一个视口(viewport)，因为我们可以有许多面板和嵌套面板。我有以下场景: 我的页面为:Page1.html、Page2.html、Page3.html。全部都有 extjs 组件。 我想加载Page1.html。 Page1.html 中的选项卡内的 Page2.html。 Page1.html 选项卡内的 Page3.html。

我的问题是: - 为什么在面板上使用 ViewPort？ ViewPort 相对于 Panel 有何优势？ - 如何使用 autoLoad 和 url 将 Page2.html 加载到 Page1.html 中？我尝试了下面的代码，但 Page2.html 中的 java 脚本未执行。

{ 
    title : 'Tab3',  
    loader: {
        autoLoad: true,
        url: 'Page2.html',
        renderer: 'html',
        scripts : true, //However script in Page2.html is not executed
    }
}

感谢任何帮助？

Answer 1

两者的目的Viewport和 Panel是相当不同的。它们在两个方向上都不可互换。它们的共同点是它们可能包含其他组件或一些 Web 内容，因为两者都是 Containers .

面板是在网页中组织内容的基本结构。它可以放置到另一个容器(例如面板、窗口或视口(viewport))中，并且可以在内部组织其他组件。它非常有用，并且被应用程序和 ExtJs 框架本身大量使用。

视口(viewport)是唯一的 - 它代表浏览器的窗口，这就是为什么页面中只能有一个视口(viewport)。其他组件可以放置在其中，但它不能放置在任何地方(它的位置和大小是由浏览器窗口决定的，而不是其他任何东西)。

你似乎在摆弄 ComponentLoader ，但你还没有清楚地解释你的目标是什么。如果将 Page2.html 的内容加载到 Page1.html 的视口(viewport)中，则会将其所有内容替换为 Page2.html。如果您对 Page1.html 中的某些面板执行相同的操作，则只会替换面板的内容。
并且 - Page2.html 应设计为“给我面板的内容”。