如何将 extjs 组件链接到 html 链接答案

【问题标题】：How to link extjs component to html link如何将 extjs 组件链接到 html 链接
【发布时间】：2021-01-03 20:59:32
【问题描述】：

使用 sencha cmd 应用程序会自动生成，其逻辑是将给定视图设置为主视图。还有自动生成的 index.html 作为加载组件的起始页面，一切都在 MVC 架构中自动完成。但是有没有办法让一些自定义 HTML 页面作为起始页面，然后从 html 链接调用 extjs 组件？例如，如果有一个像这样的html页面：

index.html

<!DOCTYPE html>
<html>
<body>

<div class="topnav">
  <a href="#login">Login</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

<div style="padding-left:16px">
  <h2>The start up application page</h2>
  <p>Some content..</p>
</div>

</body>
</html>

我怎样才能使用这个 html 作为起始页，然后通过点击登录来打开我的 extjs 登录类？我为什么要这样做？很简单，因为有更多的免费 Web 模板可以用作主要的应用程序核心。或者也许这不是现代 extjs Web 应用程序的工作方式？！

我认为可能的解决方案的一种方法是创建一个将被定义为 mainview 的主面板（在 extjs 中），然后将外部 html 代码加载到其中。但是话又说回来，问题仍然存在：如何通过单击 <a href="#login">Login</a> 链接打开登录面板？

实际上，我已经尝试过了。因此，在我的工作应用程序中，我将 index1.html 代码加载到面板中并添加：

<a href="#login" onclick="myFunction()">Login</a> 然后

<script>
function myFunction() {
  Ext.widget('login').center();
}
</script>

一切看起来很有希望，但是，在单击登录 href 时，我收到一个错误，即未定义 Ext：

【问题讨论】：

标签： html extjs

【解决方案1】：

当我对此进行实验时，我不得不调用 microloader。

<script id="microloader" data-app="61f95994-076b-4a7a-yyyy-xxxxxxx" type="text/javascript" src="/workspace/apps/webUtils/bootstrap.js"></script>

bootstrap.js 的路径对于开发或生产会有所不同。

还有：

Sencha 有 Ext Web Components https://www.sencha.com/products/extwebcomponents/

还有 Angular 和 React 的工具包。 https://www.sencha.com/products/

【讨论】：