Give Yourself A Competitive Advantage: Sencha ExtReact

Posted Jun 15, 2017

Guest post by Sandeep Adwankar. Sandeep is a Sr. Product Manager at Sencha and is passionate about innovations in mobile and web technologies. He has experience working for startups in Silicon Valley as well as large companies including Motorola and Time Warner Cable. He has an MBA from DePaul University in Chicago and a Masters in Technology from IIT Bombay.

We’re very excited to be a sponsor of React Riot! We think our new ExtReact product is a perfect fit for the hackathon. It features more than 115 beautiful UI components, plugins for WebPack and Babel to optimize builds, and theming tools to give you complete control over your application’s look and feel.

We're so confident that ExtReact will benefit development teams, that we're offering free full-featured trials, so they can judge for themselves. Plus, each member of the winning React Riot team will receive a free license of ExtReact Premium, and each member of the second place team will win a free license of ExtReact Standard.

Try It Out

ExtReact Highlights

  • Harness the power of big data with the most powerful Grid component available.

  • Allow your users to slice and dice data with the Pivot Grid ad-hoc report builder component.

  • Create beautiful, dynamic applications with the 115+ Material design inspired components including Tabs, Dialogs, Sheets, Menus, Toolbars, and Lists.

  • Develop for all screens and environments using responsive layouts.

  • Build easy-to-use data entry forms using the extensive collection of form fields.

  • Add interactive scheduling functionality to your app with Calendar** components**.

  • Add stunning data visualization capabilities **to your app with an extensive collection of **charts and *D3 visualization *components.

  • Fully control your application’s look and feel with the powerful ExtReact theming API or use Sencha Themer to style your application without writing any code.

  • Compress and** optimize application builds with the provided **Webpack and Babel plugins.

For inspiration, we’re providing example applications** including the **ExtReact Conference App and ExtReact Kitchen Sink, with views for desktop, tablets, and smartphones. Good luck in the competition. We’re looking forward to seeing the awesome web applications you create with ExtReact during React Riot!

Here is more information about how ExtReact makes it easier than ever to create beautiful, sophisticated apps with React.

ExtReact Components

ExtReact Grid

Grids are often the centerpiece of powerful, data-driven applications. The ExtReact Grid provides a powerful way to display, sort, group, and edit data. All columns can be rearranged, resized, hidden, and sorted. Users can select rows, cells, or columns just like they can in Microsoft Excel. The Grid allows users to edit data on desktop, tablets, and smartphones, and it automatically chooses the right experience on each device. Data can be exported to Excel, CSV, TSV, and other formats.

image alt text

ExtReact Tree

Trees are often required for displaying hierarchical data in desktop, tablet, and smartphone applications. The ExtReact Tree is derived from the Grid component and inherits all of its features including column resizing, sorting, filtering, and cell editing, as well as drag and drop.

 render(){
        return(
            <Tree
                title="Heterogeneous Geographical Tree"
                store={this.store} >
                <TreeColumn
                    text="Name"
                    dataIndex="name"
                />
            </Tree>
        )
    }

image alt text

ExtReact Pivot Grid

Microsoft Excel’s pivot table is a popular mechanism for summarizing, aggregating, and exploring data. The ExtReact Pivot Grid provides a simple way to bring pivot capabilities to web applications. Pivot Grid enables your users to explore and aggregate multidimensional data with multiple aggregation methods such as sum, count, average, and more.

image alt text

ExtReact Calendar

You can add an entire Calendar feature to your app with just a single component. The ExtReact Calendar and related components digest and visualize event data based on timeframe (months, days, weeks, etc). The Calendar component comes with time zone support, as well as drag and resize validations.

image alt text

ExtReact Charts

Charting is an important part of providing great data visualization functionality. The ExtReact Charts package provides all of the common chart types in 2D and 3D such as pie, bar, column, line, and scatter, as well as more sophisticated charts such as box plots, candlesticks, and radar graphs. Each chart is compatible with all major browsers. Sparkline charts can also be embedded within Grid cells.

image alt text

ExtReact D3

D3 is an extremely popular choice for data visualization. The ExtReact D3 components make it easy to integrate D3 into your React application. D3 trees, sunbursts, heatmaps, and more are included as ready-to-use components that update in real time as data changes.

render() {
        return (
                <D3_Sunburst
                    store={this.store}
                    selection={selection}
                />
        )
    }

image alt text

ExtReact Forms

The ExtReact Form components provide input masking, data validation, keyboard navigation, and focus management to help you deliver pain-free data entry for your users.

ExtReact List

Lists are an important component in mobile-first applications. The ExtReact List component supports grouping, indexing, paging, and more. You can also configure multiple swipe actions, such as deleting or replying to a message, using an accordion or stepper design.

render() {
        return (
            <List
                store={this.store}
                plugins={[{
                    type: 'listswiper',
                    // left and right configs
                }]}
            />
        )
    }

ExtReact Tabs

Tabs are a great way to allow users to quickly flip between multiple views. With ExtReact Tabs, you get multiple configuration options for position, title, and icon. Tabs can also be closeable and disabled.

image alt text

ExtReact Features

Flexible Layouts

With ExtReact Layouts, you can handle the sizing and positioning of every component in the app across different form factors and device types. ExtReact provides layouts that automatically adjust the size of child elements based on the available space. Learn more by reading the ExtReact Layouts Guide.

Responsive Props

Each component can be configured with different prop values for different screen sizes and device platforms using the responsiveConfig and platformConfig props:

<SearchField
    ui="faded"
    placeholder="Search..."
    responsiveConfig={{
        "width <= 600": {
            flex: 1
        },
        "width > 600": {
            width: 200
        }
    }}

    platformConfig={{
         "phone": {
               ui: 'faded-phone'
         }
    }}
/>

Learn more by reading the ExtReact Developing for Multiple Environments and Screens guide.

image alt text

Data Package

ExtReact provides a data package to efficiently scale remote data with ease. The data package allows your application to connect to any back-end data source and provides real-time update capabilities to grids, trees, charts, and more, as well as declarative sorting, filtering, and grouping. It features an extensible validation system with numerous built-in validators for currency, date, email, exclusion, inclusion, format, ip address, length, number, phone, time, and more. Learn more by reading the ExtReact Data Package guide.

We created an application example to show you how to use ExtReact's data store with a REST proxy and implement server-side sorting, filtering, and paging using node.js and SQLite. Check out the GitHub repo and follow the README instructions to get started.

Theming

ExtReact features an extensive Sass-based theming API that gives developers complete control over the look and feel of their applications. ExtReact Premium includes Sencha Themer, a tool that allows both designers and developers to create beautiful themes for ExtReact apps without writing code. Learn more by reading the ExtReact Theming guide.

image alt text

TypeScript Definitions

ExtReact includes TypeScript definitions that enable code completion in several code editors including Visual Studio Code. This feature allows you to receive completion suggestions for ExtReact components and props.

image alt text

Sencha Fiddle for ExtReact

Sencha Fiddle is a free tool that allows you to try ExtReact code in your browser without downloading or installing anything. You can easily share your ExtReact code by saving and sharing Fiddle URLs.

image alt text

Accessibility

ExtReact components support basic accessibility features such as keyboard navigation and focus management. You can use the keyboard to navigate between and edit grid cells, switch tabs, control list selection, navigate trees and menus, open and close dialogs, and more.

Real-Life Example - Conference App

We’ve provided an example application on GitHub called the ExtReact Conference App. The ExtReact Conference App (also available to view on our Examples web page) shows you how to build a responsive UI using ExtReact components to handle desktop, tablets, and smartphones. It also shows you how to integrate two of the most popular libraries in the React ecosystem: Redux and React Router.

image alt text