Extjs Datagrid Example

| Posted on by



This examples shows the usage of links in ViewModel. Ext JS 6 Example: CRUD in Form, Grid and Paging in Grid Demo. Description The example shows how to use Ext.grid.View method getRowClass to style individual rows or the grid. Here we change only grid background color but it is possible to change the font weight (bold/normal), font color or other attributes. Ext.NET is an ASP.NET 5 and Core component framework. 🚀 Build wicked fast ASP.NET apps with 140+ UI components and the all new Spotless premium theme.

  1. Extjs Extend
  2. Download Extjs
  3. Extjs Grid Group
  • Ext.js Tutorial
  • Ext.js Useful Resources
  • Selected Reading

This is a simple component to display data, which is a collection of record stored in Ext.data.Store in a tabular format.

Syntax

Following is a simple syntax to create grid.

Example

Following is a simple example showing grid.

The above program will produce the following result −

Grid Poperties

Collapsible − This property is to add a collapse feature to the grid. Add 'Collapsible : true' feature in grid properties to add this feature.

Sorting − This property is to add a sorting feature to the grid. Add Column property'sortable : true' in the grid to apply sorting ASC/DESC. By default, it is true. It can be made false, if you don’t want this feature to appear.

Datagrid

By default, sorting can be applied with property sorters : {property: 'id', direction : 'ASC'} in store. It will sort grid data based on the property provided in the sorters and the direction given, before rendering data into the grid.

Enable Column resize − Column can be resized (its width can be increased or decreased) using grid properties 'enableColumnResize: true'.

Datagrid

Column hideable − Add Column property 'hideable : true' in a grid to make the column appear or hide. By default, it is true. It can be made false, if you don’t want this feature to appear.

Draggable column − Add Column property 'enableColumnMove: true' is grid property with which we can move columns in a grid.

Renderer − This is the property to customize the view of grid data based on the data we get from the store.

Note − All the properties are added in the above grid example. Try them in try it editor.

extjs_components.htm

In web development it is common to show data in grid format. Extjs has Grid class which is available under panel package which we need to extend in case we want to create our own grid layout. It is very easy to create our grid on web page using this class.

Let’s see an example to understand better.

Extjs Datagrid Example
2
4
6
8
10
12
model:'com.code2succeed.Emp',
type:'ajax',
reader:{
root:'EmpDetail'
},
});

Extjs Extend

Extjs Datagrid Example

We have a json file which is available under jsondata folder which contains Emp detail in json format. We have replaced dummy data with actual url which points to json file. We can pass here the actual url of controller class which can be written in Java or any other programming language.

Content of empdetail.json file.