从 ExtJs 6 在 "Admin Dashboard" 模板创建新视图

Question

我从 ExtJs 6 开始。

我在我的应用程序中安装了 "Admin Dashboard" 模板，但现在我在创建新菜单项时遇到问题并看到它打开。

在不构建应用程序的情况下添加此项并避免“[Ext.create]无法识别的class名称/别名：小部件。[...]”错误的步骤是什么？

Answer 1

嗯，ExtJS 的学习曲线很长，它也有很好的文档和教程。你真的应该看看 Core Concepts, Architecture and the Tutorial

暂且不谈，您会看到 [Ext.create] Unrecognized class name / alias: widget. [...] 错误，因为 Ext 无法找到您要创建的 class。

每次您想使用 Ext.create("MY_APP.view.MY_CLASS") 创建 class 时，您应该确保实际加载了包含 MY_APP.view.MY_CLASS 的 javascript 文件。

通常你可以在你的Application.js或view/Main.js中使用require来加载js文件

Ext.define('MY_APP.view.Main', {
    extend: 'Ext.window.Window',
    requires: ['MY_APP.view.MY_CLASS'],
    xtype: 'mainView'
});

请注意，MY_APP.view.Main 实际上转换为 ExtJS 文件夹结构，这意味着 MY_APP.view.Main class 应该在 app/view/Main.js 中定义（这是 ExtJS 将尝试的文件使用 requires: ["MY_APP.view.Main"])

时加载

再一次，你真的应该去看看 ExtJS docs and guides

Answer 2

假定正常的基于 AdminDashboard 导航树的菜单系统及其基于 MainController "hash token to route" 的视图创建方案，我成功地完成了以下操作：

确保可以从您的 Web 应用程序上下文根直接访问应用程序源。
从模板生成应用程序后至少一次，从应用程序主目录使用 'sencha app build development' 重新编译。
将视图 class 添加到系统及其各自的 xtype（用作 xtype 小部件别名，这需要与导航路线的应用程序 url 哈希标记相匹配）。注意@Gasper 关于文件夹设置的回答。
您可以明确要求 class，或使用 'sencha app refresh' 更新 bootstrap 加载器，这使得应用程序的 bootstrap 系统知道 classes 及其别名和替代词。
请注意，管理仪表板 mainControlller 还尝试在 NavigationTree 存储中查找具有匹配 'routeId' 或 'viewType' 属性的节点。如果查找失败，您将获得“404”视图，因此您需要将此逻辑短路，或者确保新视图的 xtype 在 NavigationTree 存储中具有匹配的 viewType 或 routeId。
现在，使用与您的组件的 xtype 匹配的散列令牌刷新页面应该会将组件加载到主视图中。

从 ExtJs 6 在 "Admin Dashboard" 模板创建新视图

Create new view at "Admin Dashboard" Template from ExtJs 6

javascript

extjs

extjs6