@sencha/ext-web-components-classic

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-buil

Usage no npm install needed!

<script type="module">
  import senchaExtWebComponentsClassic from 'https://cdn.skypack.dev/@sencha/ext-web-components-classic';
</script>

README

ExtWebComponents

About ExtWebComponents

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.

ExtWebComponents 30-day Free Trial

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!

Installation and Usage

This npm package contains the needed files to add the @sencha/ext-web-components-modern package to a web-components application

Adding ExtWebComponents to an existing app

  • Create the web application directory
mkdir ext-web-components-modern-demo
cd ext-web-components-modern-demo
  • In the project directory, create a package.json with the following contents:
{
  "name": "ext-web-components-modern-demo",
  "version": "7.5.0",
  "description": "ext-web-components-modern-demo",
  "scripts": {
    "start": "npx servor . index.html 8080 --reload --browse"
  },
  "devDependencies": {
    "@sencha/ext-web-components-modern": "~7.5.0",
    "@sencha/ext-modern-runtime": "~7.5.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-modern-runtime/modern.engine.enterprise.js"></script>
<link href="./node_modules/@sencha/ext-modern-runtime/material/material-all.css" rel="stylesheet" type="text/css"></link>
<script type="module" src="./node_modules/@sencha/ext-web-components-modern/ext-web-components-modern.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>

Install the packages

npm install

Run the dev build

npm start

Explore our detailed Getting Started Guides to use ExtWebComponents (EWC) in other popular frameworks.

Interested in trying out the additional tools included in your trial?

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

EWC Trial

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.

Guides and Helpful Resources

Check out the documentation and our resource center to get quick access to examples, webinars, whitepapers and more.

Additional Resources

Repo Guides

Information for other frameworks:

Licensing

Evaluation/Trial License

Keywords

webcomponents ExtWebComponents html javascript framework components widgets ui datagrid pivotgrid chart treelist