How To Create An HTML CSS Grid
An efficient and robust Javascript data grid is vital for building a data-intensive web app. The massive volumes of data generated by small and medium enterprises call out for the need of good JavaScript developer tools that can help you build web apps capable of handling millions of data points. Ext JS meets all your requirements ranging from building a simple HTML CSS grid to a more complex and sophisticated responsive HTML 5 data grid. Continue reading for step by step instructions on how to create an HTML5 grid. To keep things simple we are creating an app using just a single HTML file. You can put all the JavaScript code in the same file. The final JavaScript data grid we’ll build looks as follows: Step 1: Which Files do I Need to Import to Create HTML CSS Grid? As a first step, link the CSS stylesheet in your HTML 5 grid project. This file will import the CSS grid layout. Create an empty HTML file and add the following line anywhere in the header of the HTML file: Next, you need to include the Ext JS library to import the objects of the HTML CSS. Add this to the HTML file: Step 2: How do I Create the Data Model for the HTML CSS Grid? To set up the data grid in JavaScript, you need to define the data model with all the fields of our grid. This is defined in the onReady() method that you can add to the script section of the HTML file. Ext.onReady(function() { Ext.define(“com.extjsGrid.Sencha”, { extend: “Ext.data.Model”, fields: [“Product”, “Environment”, “Description”] }); The above code defines a grid model com.extjsGrid.Senchawith three data fields named Product, Environment and Description. Note this onReady() function is not complete yet. We still have to define the data store and display method inside it. Step 3: How do I Create the Data Store for the HTML CSS Grid? As a third step for creating the JavaScript data grid, you need to create a data store for our HTML 5 data grid. We’ll create a variable senchaStore that is tied to our com.extjsGrid.Sencha data model. We’ll populate the data grid using the data key of our JSON data store object. Append the onReady() method with the following code. var senchaStore = Ext.create(“Ext.data.Store”, { model: “com.extjsGrid.Sencha”, data: [ {‘Product’: ‘Ext JS’, ‘Environment’: ‘Javascript’, ‘Description’:’Ext JS is the most comprehensive JavaScript framework for building feature-rich, cross-platform web applications’}, {‘Product’: ‘React Grid’, ‘Environment’: ‘React’, ‘Description’:’React Grid by Sencha is a perfect modern enterprise-grade grid solution for React UI that comes with 100+ amazing data grid features.’}, {‘Product’: ‘Ext Angular’, ‘Environment’: ‘Angular’, ‘Description’:’ExtAngular provides the most complete set of components for building data-intensive web apps using Angular.’}, {‘Product’: ‘Ext React’, ‘Environment’: ‘React’, ‘Description’:’ExtReact is the most complete set of React components for building data-intensive web apps using React’}, {‘Product’: ‘ExtWebComponents’, ‘Environment’: ‘Javascript’, ‘Description’:’ExtWebComponents provides a framework-agnostic set of over 140+ UI components for application development.’} ] }); Step 4: How do I Display the HTML 5 Grid? You can display the HTML 5 data grid using the Ext JS panel. Add the following code after adding the data store of step 3. Ext.create(“Ext.grid.Panel”, { renderTo: document.body, store: senchaStore, title: “Sencha Products”, width: 1000, columns: [{ text: ‘Prodcut’, dataIndex: ‘Product’, autoSizeColumn: true }, { text: […]
