ExtWebComponents is a comprehensive UI component library containing over 140+ pre-built UI components that are designed to work seamlessly with a framework of choice or a framework-agnostic development methodology. ExtWebComponents components are pre-built and pre-tested and work seamlessly across browsers and platforms. Built on the web components technology, the suite of enterprise-grade components consist of Data Grids, Pivot Grids, Trees, Charts, D3 Visualizations, Forms, Calendars, Buttons, Menus and many more. With the ExtWebComponents, you’ll never have to go out looking for another missing component or functionality.
The limited 30-day free trial offers full access to the ExtWebComponents UI library and tools. Try it out and see why it’s the most comprehensive component suite out there!
This npm package contains the needed files to add the @sencha/ext-web-components-classic package to a web-components application
- Create the web application directory
mkdir ext-web-components-classic-demo
cd ext-web-components-classic-demo
- In the project directory, create a
package.json
with the following contents:
{
"name": "ext-web-components-classic-demo",
"version": "7.2.0",
"description": "ext-web-components-classic-demo",
"scripts": {
"start": "npx servor . index.html 8080 --reload --browse"
},
"devDependencies": {
"@sencha/ext-web-components-classic": "~7.2.0",
"@sencha/ext-classic-runtime": "~7.2.0",
"servor": "~3.2.0"
},
"author": "",
"license": "ISC",
"repository": {}
}
- Create an
index.html
file with the following contents:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=10,user-scalable=yes">
</head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="./node_modules/@sencha/ext-classic-runtime/classic.engine.enterprise.js"></script>
<link href="./node_modules/@sencha/ext-classic-runtime/material/material-all.css" rel="stylesheet" type="text/css"></link>
<script type="module" src="./node_modules/@sencha/ext-web-components-classic/ext-web-components-classic.js"></script>
<script>
getNow = function() {
document.querySelector('#updateDiv').innerText = new Date();
}
</script>
<body>
<ext-toolbar border="1">
<ext-button text="get now" border="1" ontap="getNow"></ext-button>
<div id='updateDiv' style="margin-left:20px;"></div>
</ext-toolbar>
</body>
</html>
npm install
npm start
Explore our detailed Getting Started Guides to use ExtWebComponents (EWC) in other popular frameworks.
Fill out the zip trial form to get the zip downloads of add-on premium components:
- D3 Adapter
- Pivot Grid
- Calendar
- Exporter
Other design tools:
- Themer
- Stencils
- Test
The ExtWebComponents trial version is valid for 30-days. If you need any help with the product trial contact us. Ready to use the product for your commercial project? Check out the product pricing and licensing details.
Check out the documentation and our resource center to get quick access to examples, webinars, whitepapers and more.
- Getting Started Guides
- Sample Apps with ExtWebComponents
- Building WebComponents
- Learn about the Data Grid Features
- Official Website: https://www.sencha.com/products/extwebcomponents/
- Documentation: https://docs.sencha.com/extwebcomponents/
- Trial Download: https://www.sencha.com/products/extwebcomponents/evaluate/
- Licensing: https://www.sencha.com/store/extwebcomponents/
- EULA: https://www.sencha.com/legal/sencha-software-license-agreement/
- Support: https://www.sencha.com/company/contact/
- Community: https://stackoverflow.com/questions/tagged/extwebcomponents
- Getting Started
- Migrate/Upgrade from a previous version
- Understanding An App
- Using ext-webpack-plugin
- What's New
Information for other frameworks:
Evaluation/Trial License
webcomponents ExtWebComponents html javascript framework components widgets ui datagrid pivotgrid chart treelist