使用 ExtWebComponents 如何创建一个简单的视图？

Question

我想将几个组件和元素组合在一起，如何使用 Sencha ExtWebComponents 来实现？

例如：

<div>View</div>
<ext-button></ext-button>

Answer 1

这是一个简单的示例，说明如何组合 Web 组件。

消耗组件：

在index.js中，我导入了按钮组件，并导入了带import './SandboxViewComponent';
在 index.html 中，我用 <my-sandbox-view></my-sandboxy-view>.

以下来源

SandboxViewComponent.js

import template from './SandboxViewComponent.html';

class SandboxViewComponent extends HTMLElement {

  constructor() {
    super()

    this.innerHTML = template;
  }

  connectedCallback() {
    var me = this;

    // Add after the buttonEl.ext.el is instantiated
    setTimeout(() => {
      setTimeout(() => {
        me._addListeners();
      }, 0);
    }, 0);
  }

  disconnectedCallback() {
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
  }

  _addListeners() {
    var buttonEl = this.querySelector("ext-button");

    button.ext.on("tap", function () {
        alert("tap 1 works");
    });

    button.ext.addListener("tap", function() {
        alert("tap 2 works");
    });

    buttonEl.ext.el.on('click', () => {
      alert('ext on click works');
    });
  }

}
window.customElements.define('my-sandbox-view', SandboxViewComponent);

SandboxViewComponent.html

<div>Sandbox View</div>

<ext-button
        text="Button 1"
        shadow="true"
        arrowAlign="bottom"
        ></ext-button>

https://gist.github.com/branflake2267/38097b0fb4e6a1c5a773edf2cf532843 - 来源也在这里
Sencha 将修复 Sencha fiddle，因此此示例很快就会运行。

使用 ExtWebComponents 如何创建一个简单的视图？

Using ExtWebComponents how could I create a simple view?

extjs

web-component

extwebcomponents