Turbocharge You Modern Web Apps With Pre-Built UI WebComponents

There are many popular JavaScript frameworks that offer a component-based approach to building web apps. However, most of these do not include any pre-built components. JavaScript developers are faced with the choice of either building these components from scratch or getting them from the community. You can develop web applications faster by using ExtWebComponents. ExtWebComponents includes 140+ pre-built and pre-tested UI components.

ExtWebComponents provides all the components a developer needs to build data-intensive web apps. You get components that interact seamlessly, and are professionally built, tested and maintained.

How can I build responsive designs with WebComponents?

Developers can use the built-in Material design inspired theme, eliminating the need to construct custom styles and making it easy to create a fresh, modern user experience with minimal effort. Themes can also be easily modified or extended within Sencha Themer, enabling both developers and designers to create compelling themes without writing a single line of code. Fonts, colors, and padding can all be modified with ease to make components fit the motif of the application.

Adaptive and responsive design enables teams to build immersive user engagement by using layouts and adaptive design features. A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes. It helps developers to control the display of components, even for the most complex user interfaces.

What are some of the features available in ExtWebComponents?

  • Grid — Handle millions of records and provides built-in functionality such as sorting and grouping.
  • Pivot Grid — Add powerful analytics functionality to React applications.
  • Exporter — Export data from the standard grid or Pivot Grid to a wide variety of common formats.
  • Layouts — Ensures the proper sizing and positioning of all components with the powerful and flexible layout system.
  • Charts — Visually represent data with a broad range of dynamic and static charts including line, bar, and pie charts.
  • D3 Adapter — Add sophisticated Data-Driven Documents package (D3) visualizations such as heatmaps, treemaps, sunbursts and more to your web applications.

How can I integrate WebComponents with data?

The robust data package included in ExtWebComponents decouples the UI components from the data layer. The data package:

  • Allows client-side collections of data using highly functional models that offer features such as sorting and filtering.
  • Is protocol agnostic, and can consume data from any back-end source.
  • Comes with session management capabilities that allow several client-side operations, minimizing round-trips to the server.

How can I see ExtWebComponents and GXT in Action?

The following video covers using ExtWebComponents in GXT templates. It will start by showing how to quickly import ExtWebComponents into your project. Then show you how to construct a web component with an Ext JS web component. Then show you how to import your custom element into your GXT application.

How can I build my own WebComponents?

A web component can be considered a custom html element, like  which is constructed below.

Create a custom component with 3 easy steps. Start by declaring the reusable class element with the web component construction. Then register the class for which will be used for the components construction. Once you’ve constructed and registered the component you can declare it anywhere with

// 1. Define the reusable component
class MyViewElement extends HTMLElement {
  constructor() {

    // The components html template
    this.innerHTML = `
My Simple View
`; } // When the element is ready... connectedCallback() { } } // 2. Register the component window.customElements.define('my-view', MyViewElement);

Check out the full guide.

How can I incorporate these powerful ExtWebComponents in my own application?

In this post we’ve learned more about the Most Comprehensive Library of WebComponents to use with a JavaScript Framework or Framework-agnostic development. We’ve seen how easy it is to create you own WebComponents and we’ve looked at a tutorial video showing ExtWebComponents in action.

Ready to get started with everything you need to Create Stunning Web Applications using WebComponents?

Head over to the ExtWebComponents product page to find out more about adding them to your project.