Last active
November 13, 2019 02:59
-
-
Save branflake2267/07b5169f25af246a493663dc25858950 to your computer and use it in GitHub Desktop.
ExtWebComponent custom element usage
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Sample ExtWebComponents</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes"> | |
| </head> | |
| <body> | |
| <!-- ### (OR) 2. Define the view's html --> | |
| <template id='my-view-template'> | |
| <ext-container padding="10"> | |
| <ext-button text="Say Hello" ui="action raised"> | |
| </ext-button> | |
| <ext-button text="Say Goodbye" ui="action raised"> | |
| </ext-button> | |
| <ext-container id='updateContainer' style='padding:10px;'></ext-container> | |
| </ext-container> | |
| </template> | |
| <script type="module"> | |
| // 1. Import the ext components that will be used in the custom web component | |
| import './node_modules/@sencha/ext-web-components/src/ext-button.component.js'; | |
| import './node_modules/@sencha/ext-web-components/src/ext-container.component.js'; | |
| // 2. Create the view's html | |
| const _template = ` | |
| <ext-container padding="10"> | |
| <ext-button | |
| text="Say Hello" | |
| ui="action raised"> | |
| </ext-button> | |
| <ext-button | |
| text="Say Goodbye" | |
| ui="action raised"> | |
| </ext-button> | |
| <ext-container id='updateContainer' style='padding:10px;'></ext-container> | |
| </ext-container> | |
| `; | |
| // 3. Create a custom web component element with Ext components | |
| class MyViewElement extends HTMLElement { | |
| constructor() { | |
| super(); | |
| this.innerHTML = _template; | |
| // ### (OR) 2. use the html template tag | |
| //let template = document.getElementById('my-view-template'); | |
| //this.appendChild(template.content); | |
| } | |
| // When the element is ready... | |
| connectedCallback() { | |
| this._addListeners(); | |
| } | |
| _addListeners() { | |
| let button1 = this.querySelector('ext-button[text="Say Hello"]'); | |
| button1.addEventListener('tap', (event) => { | |
| this._updateContainerMessage('Say Hello World!'); | |
| }); | |
| let button2 = this.querySelector('ext-button[text="Say Goodbye"]'); | |
| button2.addEventListener('tap', (event) => { | |
| this._updateContainerMessage('Say Goobye Cruel World!'); | |
| }); | |
| } | |
| _updateContainerMessage(message) { | |
| let updateContainer = this.querySelector('#updateContainer'); | |
| updateContainer.innerText = message; | |
| } | |
| } | |
| window.customElements.define('my-view', MyViewElement); | |
| </script> | |
| <!-- 4. Use your custom element --> | |
| <my-view></my-view> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment