如何在 extjs 中使用多个控件答案

【问题标题】：how to use multiple controls with extjs如何在 extjs 中使用多个控件
【发布时间】：2011-07-20 08:50:12
【问题描述】：

刚刚通过以下示例。

http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

这会通过设置干净的 mvc 结构并向页面添加网格。在我的网站上，我希望使用许多 extjs 功能。但希望对以下内容有所了解。

1) 通常会有 1 个网站只有一个 app.js，或者我会为每个功能创建一个新应用程序。因此，如果我想要 1) 联系信息网格 2) 新闻网格 3) 图表。是否意味着3个应用程序。

这就是我当前加载我的应用程序（这是一个网格）的方式

index.html

<html>
<head>
    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js

Ext.application({
    name: 'AM',
    appFolder: 'app',
    controllers: [
            'Users'
            ],
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'userlist',
                    title: 'Users',
                    html: 'List of users will go here'
                }
            ]
        });
    }
});

【问题讨论】：

你有没有解决过这个问题。我也在努力实现一个 Web 应用程序，该应用程序具有多个具有不同组件的页面或单个页面上的多个组件。我在尝试让它们使用模型主题正确渲染一个组件干扰另一个组件时遇到了问题。最后，我刚刚为每个使这个项目变得庞大的组件写入文件。你能评论一下你决定做什么吗？

标签： extjs extjs4

【解决方案1】：

@Frosty，每个网站只需要一个应用程序文件。

我们鼓励您为将在您的网站中使用的网格、图表和任何其他组件创建单独的类。每个类都应该进入一个单独的文件。

因此，当您使用 Ext.create 创建组件的实例时，EXTJS4 将动态加载该 javascript 文件。这有助于解决大型应用程序中的性能问题，因为不需要在页面加载时关闭所有文件。

【讨论】：

在上面的例子中，启动方法创建了视口。显然我不想在每一页上都有这个网格。那么我是否将启动移动到单独的 js 文件中？
据我了解，Ext.Application 类主要用于单页应用程序。也就是说，用户浏览到一个页面 (index.html) 并在他们在您的网站上花费的时间期间停留在该页面上。然后使用 ExtJS 动态引入所有内容和组件。更多信息请参阅文档docs.sencha.com/ext-js/4-0/#/api/Ext.app.Application
总而言之，如果用户停留在同一页面上，那么您只需要 1 个 Ext.Application 文件。如果用户将浏览多个页面，那么最好在您的网站上以不同的方式实现 ExtJS4，即不使用 Ext.Application 就我个人而言，我从未使用这种单页架构构建过应用程序或网站，因为我觉得它太受限制了对于大型应用程序。