ExtJS - Simple ExtJS Grid

ExtJS Grid

• ExtJS Grid Panel is one of the versatile and most used component in this framework.
• Ext.grid.Panel is a component that displays the data contained in  Ext.data.Store.
• Ext.data.Store maintains the data CACHE for ExtJS components.
• Ext.data.Store is the instance of  Ext.data.Model .

As mentioned above, the job of  EXT JS grid to display the data and provides the functionality of the grid.
The purpose of the Ext.data.Store is fetching the data and maintains the data for the component.

Ext Data Model

Ext.data.Model represents the data model or data structure of  Ext.data.Store.

Ext.define('Employee', {

    extend: 'Ext.data.Model',

    fields: [ 'name', 'designation', 'age' ]

});

Ext Data Store

Ext.data.Store is the instance of data model Employee

var empStore = Ext.create('Ext.data.Store', {
    model: 'Employee',
    data: [
        { name: 'Sathish', email: 'sathish@example.com', phone: '555-111-1224' },
        { name: 'Vinod', email: 'vinod@example.com', phone: '555-222-1234' },
        { name: 'Nagamuthu', email: 'naga@example.com', phone: '555-222-1244' }
    ]
});

Now Ext.data.Model Employee and Ext.data.Store is available to populate the data in Ext.grid.Panel.

Following snippet explains how to make use of Ext.data.Store  to display the data in Ext.grid.Panel.

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    store: empStore,
    width: 400,
    height: 200,
    title: 'Employee details',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Designation',
            width: 150,
            dataIndex: 'designation',
            hidden: true
        },
        {
            text: 'Age',
            flex: 1,
            dataIndex: 'age'
        }
    ]
});

ExtJS Simple Grid Sample