How to Build React 16 Web Apps with the Sencha Grid

Efficiently manage and display large datasets in React 16 applications with Sencha ExtReact Grid, taking advantage of built-in features such as sorting, filtering, and editing, without the need for a lot of DOM operations.

Key points:

• Efficiently manage and display large datasets in React 16 applications with Sencha ExtReact Grid, leverage built-in features such as sorting, filtering, and editing, without the need for a lot of DOM operations.
• Simplify the development process with the ExtReact npm package and ExtReact application generator.
• Enhance the user interface by embedding interactive components such as buttons and sparkline diagrams directly into grid cells, providing a dynamic and responsive user experience.
• Use the grid exporter plug-in to enable the data export feature with just a small amount of code, allowing users to export data directly from the grid to Excel or CSV format.
• Use conditional plugins and responsive design features to optimize applications for desktop and mobile platforms to ensure a seamless cross-platform user experience.

This article was originally published in Sencha. Thank you for supporting the partners who made SitePoint possible.

React 16 is the first React version built on React's new core architecture (codenamed "Fiber". React 16 is fundamentally designed to support asynchronous rendering, which allows processing large component trees without blocking the main execution thread. It supports many key features such as catching exceptions with error boundaries, returning multiple components from rendering, reducing file size, and supporting MIT licenses.

If you are developing a data-driven web application using React 16, there is a high probability that you will use a grid or spreadsheet-like interface to display user data at some point. Depending on the situation, your users may want the grid in the application to be able to:

• Scroll with fixed title
• Sort by clicking on the column title
• Show and hide specific columns
• Paging, grouping and summary
• Edit data in a cell
• Export to Excel
• In-depth/line extension

Mesh is probably one of the most difficult and complex UI components in React, as many of the necessary features require a lot of React expertise, as well as the willingness and ability to delve into the DOM in depth. Fortunately, ExtReact Grid offers all these features and more.

In this article, we will use Sencha ExtReact Grid to create an example that displays information about stocks and stock companies. If you want to write a grid using HTML tables or other third-party components, you may need to do things like handling clicking on the column header for sorting, clicking the separator between the column headers to resize, or sliding the pager and getting the next Operations such as page data. With ExtReact Grid, these features are built-in. Want to try it yourself? Get started with ExtReact's 30-day free trial now – sign up here.

Let's start building applications using ExtReact Grid.

Getting started with ExtReact Application Generator

To start developing a React application using ExtReact components, follow these steps:

Make sure you have set up a Node environment

First, make sure Node 8.11 and NPM 6 are set on your system. You can download the latest Node version from the Node website. If you already have Node installed, you can easily check node and npm versions using the following command:

<code>node -v
npm -v</code>

Get login credentials for ExtReact npm repository

ExtReact npm package is hosted in Sencha's private npm repository. You only need to log in to the repository once to access all ExtReact packages. To get login credentials, visit the ExtReact 30-day free trial page and fill out the form. We will send you an email with login details as well as some resource links such as documentation and sample projects.

Login in the ExtReact npm repository and get the ExtReact application generator

The next step is to log in to Sencha's private npm repository, which hosts the ExtReact package. Use your npm login (provided in email) to associate the repository with the @sencha scope and enter the credentials when prompted:

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

The next step is to install the ExtReact generator package.

<code>npm install -g @sencha/ext-react-gen</code>

Create your first React application

Run the Yeoman generator to create your first ExtReact application:

<code>ext-react-gen app your-app-name-here -i</code>

The generator will ask you to name your application, name the npm package and select the theme. The default Material theme (based on Google's Material Design Guide) is a good starting theme. Select "Generate an empty application". The generator will also prompt you to create a new directory for the project. The generator will then download and create your sample application, including the relevant dependencies.

Run your React application

In the generator output, you will find the steps to run the application. It's as simple as changing to your new application directory and running the application with the following command:

<code>npm start</code>

This will launch the application and your empty React application will only display the title of the application. The main component in the application (such as StocksGrid) has a container at the root directory that is marked full screen with the layout set to fit, which means it will stretch its child elements to fill it.

See the code before this step on GitHub.

Add a grid to the application

Add stock data

We will add a sample dataset to the application, called stocks.json. This is a pretty large dataset with about 10,000 rows of json data, each line represents a company or stock code – so we have the company name, stock code, industry, industry they are in, and a last 5 times containing that stock tick array for sale. This is the data we will display in the grid. In a real application, all this data will be returned in the backend. We will load it statically for this sample application, rather than iterating through all the mechanisms of how to build the backend rest API. But it will load in exactly the same way you get the data from the actual backend.

Create a basic grid

In the StockGrid component render method, we will return a grid with columns.

To place columns in the grid, we use the column component, which takes the same dataIndex as the stocks data name field. It takes a text prop as the column header text, and we can then specify a width for the column, such as a fixed width or flex, or a combination of flex and a minimum or maximum value. We will add column components to company names, codes, ticking, industry and industry. Create a new StocksGrid class as shown below:

<code>node -v
npm -v</code>

Now, add StockGrid to the Class App as follows:

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

See the code before this step on GitHub. You will be able to see a web application with an empty grid on npm start.

Bind stock data using grid

The grid in ExtReact is a table that extracts and renders data from the Ext Data Store. In ExtReact, our storage implementation is a data structure that allows you to sort and filter data for grids or components such as lists or charts.

We can now start loading stock data and creating storage. Likewise, the grid always gets its data from the storage, and some interaction with the grid will trigger events on the storage, such as reloading, sorting, or paging. To do this, we will create our storage here.

Ext data storage is different from flux storage. What makes mesh and storage slightly different from the standard React method is that the two are tightly integrated. Typically, you can pass data directly to the storage, or the storage can extract data from the backend by itself using a proxy. With ExtReact Grid, you get interactive features such as filtering, sorting, paging, grouping, and summarizing without actually writing code.

In this example, we pass data directly to storage from the Stocks data file. You can also create storage using proxy configurations – owning a proxy allows us to perform a variety of great actions such as remote paging, filtering, and sorting. We set autoload to true so it will automatically load the grid. The data is not specifically sorted by any criteria, so we will sort it on the client by specifying the name attribute.

<code>npm install -g @sencha/ext-react-gen</code>

In Grid, assign the store configuration to the created store.

<code>ext-react-gen app your-app-name-here -i</code>

Now, we have a grid with all the data as follows:

With this simple code, you can get many features for free—such as sorting—this allows you to click on any column header and it will sort automatically (see symbolic columns below).

In this case, the sorting is done on the client side. However, if we implement a real backend API, we can configure the proxy to sort remotely in the background and sort it in the database using the "order by clause".

You can also get resizable columns for free. So even if we set widths on these columns, if the user wants to view or close something, he can do it by dragging the columns left and right.

You can also get a nice grouping feature. So if we want to group by industry, we can say group by this field, it will group all the data by industry's value, and as you scroll down each group, it will give you a fixed title.

You will notice that for 10,000 records, this data renders very fast. The reason it renders so fast is that it uses what we call buffer rendering. So while this table looks full and you can scroll down and it keeps going, it only renders a little more content than you actually see in the "viewport height" when it initially loads.

When you scroll down, it actually replaces the contents of the cell with newer records, just like you're paving down in storage. So it actually preserves the DOM elements as much as possible and keeps the DOM small, thus making memory consumption less and ensuring high performance.

See the code before this step on GitHub.

Set grid style

There are several ways to style the grid so that data is easier to analyze.

Using Cell prop

Let's take a look at how to control cell styles. We can make the name bold - the best way is to use cell prop. The cell uses a number of configurations that control the appearance of the cell. We will add a style configuration here, and then we will say fontWeight is equal to bold.

<code>node -v
npm -v</code>

Add button in line

Now, we will do something more suitable for the real world. Suppose we want a button that we can click to buy one of the stocks in the column on the left. To do this we can add a column, this time we won't add the dataIndex as it does not correspond to any specific item in the field or any field in the store. We will add a WidgetCell with Button. We'll do some styles - we'll add a circular action UI to it, so the button will have a circular action look:

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

The buy handler we will use is very simple. When you click the Buy button, we will just use the assumption called ext.toast, which will display a small prompt message at the top showing the code for the stock you are buying. Similarly, we will render the columns that each row will be rendered. We will render this button and then when you click it, it will call this function:

<code>npm install -g @sencha/ext-react-gen</code>

You can see from this example that you can basically embed any ExtReact component inside the grid cell and it is completely interactive. It acts as a complete React component.

See the code before this step on GitHub.

Add a trend spark line chart

In Stock Data, we have a tick array of the last five stock sales. Let's embed it into the grid as a spark line graph. We will use widgetcell to render the ExtReact component inside the grid cell.

<code>node -v
npm -v</code>

When you hover over different points in the online graph with your mouse, it will display the Y value formatted as two decimal places.

See the code before this step on GitHub.

Export data to Excel

One of the common requirements in data-intensive applications is to export data to Excel. ExtReact can easily achieve this by using the grid's plugins prop.

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

To facilitate the call to the export function, we will add more components. We will add the titlebar and dock the titlebar at the top of the grid and place a menu in it. When you click the Export button, you will have the option to export to Excel or CSV.

<code>npm install -g @sencha/ext-react-gen</code>

The export handler will pass the export type and filename extension:

<code>ext-react-gen app your-app-name-here -i</code>

Make sure to include the exporter in the package.json dependency. For example:

<code>npm start</code>

Installing dependencies.

<code><grid> ></grid>
      <column> dataIndex="name" text="Name" width={300} /></column>
      <column> dataIndex="symbol" text="Symbol" /></column>
      <column> dataIndex="ticks" text="Trend" /></column>
      <column> dataIndex="sector" text="Sector" width={200} /></column>
      <column> dataIndex="industry" text="Industry" width={350} /></column>
></code>

The Exporter plugin supports exporting data to various file formats. It supports native XSLX, Excel XML, and HTML and CSV/TSV (comma/tab separated values) formats.

See the code before this step on GitHub.

Add editing to the grid

We can make the grid more like a spreadsheet by adding the function of editing data. To add this feature, we need to add another plugin called gridcellediting. By adding this plugin and marking the editable columns as editable, you now have grid data that can be edited by double-clicking any grid cell. You can continue editing the grid by pressing the Tab key in the grid cell.

Add Grid Cell Editing Plugin:

<code>export default class App extends Component {
  render() {
       return (
           <extreact></extreact>               <stocksgrid></stocksgrid>              
       )
   }
}</code>

Make "name" editable:

<code>     this.store = new Ext.data.Store({
           data: stocks,
           autoLoad: true,
           sorters: [{
               property: 'name'
           }],
           listeners: {
               update: this.onRecordUpdated
           }
       })</code>

handle editing events

If you want to perform some special operations after editing the grid cell, you can listen for data change events in the storage. You can do this by adding listener configuration and "update events" listeners.

"Update Event" will pass many parameters, including storage, updated records, objects describing the occurrence of events, and then pass an array of changed field names. You will add it in the handler. In this case, we just display a prompt message. In a real application, you actually apply business logic, such as persisting changes to a database.

<code><grid> store={this.store}></grid>
      ...
></code>

Add selection options to grid cells

If you want to add a "Select" option to a grid cell, you can do it using another ExtReact component called SelectField. You just need to add the SelectField ExtReact component in the desired column.

<code>node -v
npm -v</code>

See the code before this step on GitHub.

Optimize cross-platform experience

This works great for desktop experiences, but cell editing may not be the best editing experience when you minimize the screen size of your mobile phone experience. For small screen devices, you may need to choose a different editing style.

The

platformconfig option allows you to specify behavior for desktop or mobile devices. You can set any prop to a different value according to PlatformConfig, here we will set the plugin according to the platform. In this example, when the application is on the desktop, we will use gridcellediting. When the app is on a mobile device, we will use gridditable, which provides a better way to edit data on a mobile device.

<code>npm login — registry=http://npm.sencha.com — scope=@sencha</code>

See the code before this step on GitHub.

You can use ExtReact 6.6 grid and easily add a spreadsheet-like interface to a data-driven web application using React 16. With ExtReact, you can use any Ext JS modern component, including meshes, tree meshes, perspective meshes, charts, D3 visualizations, and more—no customization required. You can build an optimized minimization package that contains only the components you use in your application. You can build immersive user engagement by using layouts and adaptive design features that look great on both desktop and mobile devices. As a reminder, you can start a free trial of ExtReact’s 30-day trial now – sign up here.

Frequently Asked Questions about Building React 16 Web Applications with Sencha Grid

What is Sencha Grid and how does it integrate with React 16?

Sencha Grid is a high-performance grid component designed to handle large amounts of data. It integrates seamlessly with React 16, a popular JavaScript library for building user interfaces. This integration allows developers to take advantage of the power of React's component-based architecture and the power of Sencha Grid, such as data sorting, filtering, grouping and editing. This combination provides powerful tools for building complex web applications.

How to get started with Sencha Grid in my React 16 application?

First, you need to install the Sencha Grid package using npm (the package manager for Node.js). Once installed, you can import the Sencha Grid component into your React application and use it like you would with any other React component. Sencha Grid components provide various props that you can use to customize their behavior and appearance.

Can I use Sencha Grid with other JavaScript frameworks or libraries?

Yes, Sencha Grid's design is framework-free, meaning it can be used with any JavaScript framework or library. However, because both React and Sencha Grid have component-based features, integration with React 16 is particularly seamless.

What are some key features of Sencha Grid?

Sencha Grid offers a wide range of features, making it a powerful tool for displaying and manipulating large amounts of data. These features include sorting, filtering, grouping and editing of data, as well as advanced features such as infinite scrolling, row extender, and column locking. The grid also supports a variety of data types and formats and can be easily customized to suit the needs of your application.

How does Sencha Grid handle large amounts of data?

Sencha Grid is designed to process large amounts of data efficiently. It uses a virtual scrolling mechanism that renders only rows currently visible in the viewport. This means that even if your grid has thousands or even millions of rows, the performance is still high and the user experience is smooth.

Can I customize the appearance of the Sencha Grid?

Yes, Sencha Grid offers a variety of options to customize its appearance. You can use CSS to change colors, fonts, and other styles, and you can also use its extensive API to customize the layout and behavior of the grid.

How to handle user interaction with Sencha Grid?

Sencha Grid provides various events that you can listen to to handle user interactions. These events include clicking events, selecting events, editing events, and more. By listening on these events, you can implement complex behaviors and interactions in your application.

Can I use Sencha Grid in a commercial application?

Yes, Sencha Grid is available for both commercial and non-commercial applications. However, for commercial use, you need to purchase a license from Sencha.

How to update data in Sencha Grid?

Sencha Grid provides a variety of ways to update data. You can update the entire dataset or a single row or cell. When the data is updated, the grid automatically rerenders the affected rows or cells.

What types of support does Sencha Grid provide?

Sencha provides Sencha Grid with comprehensive documentation and tutorials, as well as a community forum where you can ask questions and share knowledge with other developers. In addition, Sencha provides professional support and consulting services to clients who need additional help or guidance.

The above is the detailed content of How to Build React 16 Web Apps with the Sencha Grid. For more information, please follow other related articles on the PHP Chinese website!