Extjs 使用ExtWebComponents如何创建简单视图?
我想将几个组件和元素组合在一起,如何使用Sencha ExtWebComponents呢 例如:Extjs 使用ExtWebComponents如何创建简单视图?,extjs,web-component,extwebcomponents,Extjs,Web Component,Extwebcomponents,我想将几个组件和元素组合在一起,如何使用Sencha ExtWebComponents呢 例如: <div>View</div> <ext-button></ext-button> 视图 下面是一个简单的示例,说明如何组合web组件 使用组件: 在index.js中,我导入了按钮组件,并使用import./SandboxViewComponent'导入了组件 在index.html中,我用声明我的 以下来源 SandboxViewComponen
<div>View</div>
<ext-button></ext-button>
视图
下面是一个简单的示例,说明如何组合web组件
使用组件:
import./SandboxViewComponent'导入了组件代码>
声明我的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>
沙盒视图
- -来源也在这里
- Sencha将修复Sencha小提琴,因此该示例将很快在那里运行李>