The invention of the internet has been one of the most influential events in human history. There is hardly any aspect of our civilization that the web has not affected in some way. Given its massive effect on the way we live our lives, it is hardly surprising that the technologies that have helped to bring the internet into the mainstream are significant in their own right. While the list includes many technologies, the true foundation of today’s internet is in the languages that make it possible: HTML, CSS and JavaScript.
HTML deals with the structure of websites and their interaction with other parts of the web. CSS revolves around the aesthetics of websites. However, JavaScript makes the web’s main functionalities possible. It drives the web’s core abilities and controls its design and workflow.
Essentially, you can use JavaScript frameworks to write the behavior of a website as well as its style and visual elements.
JavaScript Grids are one of the most common examples of how JavaScript allows developers to build unique functionality into a website. Using grids and the familiar syntax of JavaScript, developers can display data clearly and concisely. Because the grid is so indispensable, all robust frameworks, like Sencha ExtJS, offer an intuitive interface for creating them.
In this article, we’ll look into how JS Grids have evolved over the years and get an idea of how Ext JS users leverage this tool.
How Have Grids Evolved Throughout the History of JS?
The JavaScript Grid was born out of a need to more effectively handle and display data in tables on websites. Before its introduction, most solutions required complex and extensive CSS stylesheet programming. Needless to say, that got tedious quickly.
In addition to being complex to write, the failure rate on CSS-driven sites was high. Entire websites would crash under the load of displaying large amounts of data. With JS Grids, however, developers could simply load data in an array and show it to the end-user.
Over the years, JS Grids have grown into much more than eye-pleasing containers for data tables. Grids now support advanced data handling and processing abilities. The newer grids commonly support features found in popular spreadsheet software, like Microsoft Excel. These abilities include data filtering, data binding, and aggregating rows and rows of data — and that is just the tip of the iceberg. The development ofJS Grids mirrors JavaScript’s own growth closely as this whitepaper discusses.
One popular JS Grid is the TypeScript plugin Grid.js. Although it is economical in size (just 12kb with all plugins!), it packs a lot of processing power. It sports an internal pipeline with optimized caching and broad support across all frameworks like Rue or Angular.js. Most importantly, it does not lock you into any particular vendor. In addition to its many benefits, it is also free to use and integrates closely with other components using its Flux architecture.
JS Grids have come a long way from their origins as rare and complex functionality to their current state as a free open-source plugin. With a dedicated developer community working to continually improve its processing capabilities, the JS Grid gets more robust every year.
How Does ExtJS Offer Support For JS Grids?
It is no shock that a powerful JS framework like Sencha ExtJS offers an easy way to integrate JS Grids into your application. You can easily use the Ext.grid.Panel interface to bring JS Grids and data processing into your applications. Developers widely regard Sencha ExtJS as their preferred JS Grid interface.
Let’s take a look at how it works. A Panel instance takes data stored as collections of records in an Ext.data.Store instance. To get started with creating your own Ext.grid.Panel, you need to store your data using Ext.data.Store. You then specify the schema of the data using Ext.data.Model. For example, here is a sample data model of a table.
| Ext.define(‘Country’, { extend: ‘Ext.data.Model’, fields: [ ‘name’, ‘capital’, ‘currency’ ] }); |
Once you have created the model, loading data into an Ext.data.Store instance requires only a few statements.
| var countryStore = Ext.create(‘Ext.data.Store’, { model: ‘Country’, data: [ { name: ‘USA’, capital: ‘Washington D.C.’, currency: ‘US Dollar’ }, { name: ‘Japan’, capital: ‘Tokyo’, currency: ‘Japanese Yen’ }, { name: ‘Australia’, capital: ‘Canberra’, currency: ‘Australian Dollar’}, { name: ‘Germany’, capital: ‘Berlin’, currency: ‘Euro’ }, ] }); |
Now, with your data model and data records locked and ready, it is time to define your grid and its properties. With the following statement, you can make your grid ready to render.
| Ext.create(‘Ext.grid.Panel’, { renderTo: document.body, store: countryStore, width: 400, height: 200, title: ‘Countries’, columns: [ { text: ‘Name’, width: 100, sortable: false, hideable: false, dataIndex: ‘name’ }, { text: ‘Capital’, width: 150, hideable: false, dataIndex: ‘capital’ }, { text: ‘Currency’, hideable: false, dataIndex: ‘currency’ } ] }); |
Just like that, you are done! You now have a navigable grid of data with columns rendered to your specification. While this example primarily works with textual data, you can easily store all different kinds of data types like email addresses or phone numbers.
Sencha ExtJS simplifies the complexity of working with JS Grids. It provides adaptable methods that bring all its processing power to your fingertips. For example, you can make the cells of a particular column editable by specifying the editor attribute when you define the column. You can also control what type of data the editor allows in the cell. Likewise, editing a whole row is also possible with Ext.grid.plugin.RowEditing.
What Are Some Examples of Advanced JS Grids Through ExtJS?
Given the importance of data today, framework creators realized that users would need the JS Grid interface for many different use cases. In addition to displaying simple text or numerical data, developers require more complex representation. That is why new releases of Sencha ExtJS extend its JS Grid implementation with a wide array of new capabilities.
Let’s take a look now.
Widgets & Components in Grid Cells
With the recent ExtJS updates, you can show much more than regular data in grids. Now you can configure your own widgets and include them in cells. These widgets can also include different kinds of graphs or sliders to widen or shorten the amount of aggregated data cells.
With our new widgets, ExtJS users can easily fulfill their data visualization requirements. For instance, you can easily place grids and dashboards alongside each other. Thanks to the high level of familiarity and control offered by JavaScript, you don’t need complicated BI tools for quick data analysis.
Exporting External Data Into ExtJS
As you know, there are standalone data analysis and testing tools on the market. If you want, you can perform more complex analysis in those tools and bring the cleaned data and visualizations to the web with ExtJS. Thanks to the ExtJS Exporter package you can use its concise workflow to simplify the data transfer and import and export from ExtJS.
To get started within ExtJS, simply import the Exporter package. Then, you can specify how you want your data exported. You can also use Exporter to manipulate files or control every aspect of your data import or export.
JS Grids are widely used today and through the Sencha ExtJS framework’s simple yet powerful implementation. More and more developers are getting used to JS Grids.
Ready to get started with Sencha Ext JS? Head over to Sencha Ext JS and create your own apps with Sencha now.
This post has been brought to you by the team at Sencha.
Featured Image: Gabriel Heinzer, Unsplash.
No Comments