The Best Kept Secrets About JS Grids

With its comprehensive functionality and many extensions, the Ext JS grid is an extremely useful component.  It simplifies app design because it does not rely on third-party libraries. Built-in Ext JS UI components like dropdown menus, grouping data, and other critical fascinating add-on functionalities also assist with data organization.

In this article, we discuss the best-kept secrets about JS grids.

Did You Know that You Can Lock Columns?

A grid that contains a large number of data points often requires horizontal scrolling when its columns overflow the display. This is not ideal because when a user scrolls horizontally, important columns like “name” slide out of view. This leaves the user feeling disconnected and looking at an incomplete or difficult-to-read grid.

Thankfully, to overcome this problem, Ext JS has a column locking feature. You can enable it by either setting ‘enable locking’ to ‘true’ or by setting the column’s ‘locked’ configuration to ‘true’ to enable automatic locking.

Did You Know that We Can Embed Components in a Grid Cell?

In Ext JS, with the WidgetColumn class, programmers can embed components inside grid cells. Adding a Widget Column to your page is a straightforward process. Simply set the column xtype as “widgetcolumn”. You can store the xtype for each cell in the widget config object for any Ext.Widget or Ext.

The xtype references the component class. This feature allows you to use simple grids more interactively. For example, you can embed multiple component types and data visualizations like charts inside each cell.

Did You Know that Grids Don’t Load All the Data at Once?

The grid in Ext JS implements buffered grid rendering. This allows users to browse thousands of data points without the performance costs of drawing all of them into the DOM at once. The plugin configuration allows you to control the number of rows rendered beyond the visible region. Ext JS automatically creates and applies this call to all grids without needing user intervention.

Did You Know that Grid Supports Data Exports?

In Ext JS, you can export grid data into your specific formats and save the documents for future use. The Exporter plugin includes a variety of data exporters that extend the base class Ext. exporter. This plugin creates two new methods in the grid panel — saveDocumentAs (config) and getDocumentData(config). These export all grid columns with the flag ignoreExport set to false. You can also format export data in every column by using the exportStyle format, using formatter if exportStyle is not defined, and using exportRenderer.

Did You Know that Rows Can Be Expanded in the Grid?

The Row Expander plugin adds an “expander” column to each row, allowing the user to expose or hide the row’s body. This feature is essential since users can minimize, maximize, or hide columns based on their requirements. Another benefit of this feature is that it hides unwanted data.

Did You Know that Filtering and Sorting Can Be Done in Grids?

Sencha grids support both filtering and sorting. Grid filtering reduces the number of rows by hiding them. The filter specifies which data members inside the store’s collection can be filtered and how. Some possible filter types are BooleanFilter, StringFilter, NumericFilter, and DateFilter.

Grid Sorting arranges data in the grid by the column in ASC or DESC order. You can do this either remotely or locally. Locally means sorting the full ListStore or TreeStore collection on the client. Just remember, it’s best to keep your data collection below 1000 records. Remote Data Sorting refers to sorting data on the server before it reaches the client.

Did You Know that Grids Have Drag and Drop Feature?

Ext.grid.plugin.DragDrop allows you to drag and drop items in a GridView. Ext.dd.DragZone and Ext.dd.DropZone tie to the grid view. The DropZone will involve drops from the DragZone, which has the same ddGroup, and includes dropping within the grid itself. You can drag data from one grid and drop the data into another using the drag and drop plugin and vice versa.

Did You Know that Ext JS Grids Give You Spreadsheet Features?

Ext.grid.selection.SpreadsheetModel lets you select the data/cells in spreadsheet style. You can:

• Select single range cells
• Select single or multiple range cells or individual rows
• Make column selections by clicking on column headers
• Add row number columns  to select rows
• Use checkboxes to select rows
• Select or deselect all by clicking in the top-left header.

These features help a user familiar with spreadsheets to sync with Ext JS grids.

Are You Ready to Get Started with Sencha?

Investing in Sencha Ext JS for its amazing grid features is one of the most valuable decisions that one could make. Simply put, Ext JS saves you time. In this article, we discussed the best-kept secrets about JS grids. Please let us know in the comments section below if you found it useful.

Start building your applications now with powerful Ext JS grid features!