ExtJS - Simple ExtJS Grid

ExtJS Grid


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

No comments

Powered by Blogger.