In this blog we are explaining about how to create grid view and bind data with grid view




In the way of developing we firstly define model .In model we defined properties of components likes grid, that’s we use for view.

And after that we write data(Information about employee) associated with data index that’s defined in view section. When we write source code of gridView design then we also defined dataIndex related with column name.

And the last but not least we write source code of gridView in view section.

What is grid view?

Gridview control , you could display an entire collection of data, easily add sorting and paging, and perform inline editing.

For Develop

Create your Html page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
 
</body>
</html>

 Insert following link and cdn between head open and close tag

     <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
 How to create a grid view with data binding in same page
<script type="text/javascript">
        Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.panel.*',
        'Ext.layout.container.Border'
        ]);
 
        Ext.onReady(function () {
            Ext.define('Task', {
                extend: 'Ext.data.Model',
 
                proxy: {
                    type: 'ajax',
                    reader: 'xml'
                },
                fields: [
                { name: 'empId', type: 'int' },
                { name: 'name', type: 'string' },
                { name: 'dptCode', type: 'int' },
                { name: 'dpt', type: 'string' },
                { name: 'yrlyPckge', type: 'float' },
                { name: 'jningDte', type: 'date', dateFormat: 'm/d/Y' }
                ]
            });
 
            var data = [
          
            { empId: 101, name: 'Olivia', dptCode: 121, dpt:'IT',yrlyPckge: 20, jningDte: '07/05/2013'},
            { empId: 101, name: 'Mason', dptCode: 104, dpt:'Management',yrlyPckge: 10, jningDte: '07/06/2007'},
            { empId: 102, name: 'Noah', dptCode: 105, dpt:'Hr',yrlyPckge: 14, jningDte: '07/01/2016'},
            { empId: 102, name: 'Jacob', dptCode: 121, dpt:'IT',yrlyPckge: 12, jningDte: '07/02/2012'},
            { empId: 114, name: 'Harper', dptCode: 104, dpt:'Management',yrlyPckge: 16, jningDte: '07/05/2014'},
           
            ];
 
create the Data Store

           

var store = Ext.create('Ext.data.Store', {
                model: 'Task',
                data: data,
                sorters: { property: 'due', direction: 'ASC' },
                groupField: 'project'
            });

create the grid

            

var grid = Ext.create('Ext.grid.Panel', {
                bufferedRenderer: false,
                store: store,
                columns: [
{ text: 'EmployeeId', width: 120, dataIndex: 'empId', sortable: true },
                { text: 'Name', type: 'string', dataIndex: 'name', sortable: true },
                { text: 'Department code', type: 'int', dataIndex: 'dptCode', sortable: true },
                { text: 'Department', type: 'string', dataIndex: 'dpt', sortable: true },
                { text: 'Annual Package(in Lacs)', type: 'float', dataIndex: 'yrlyPckge', sortable: true },
                { text: 'Joining Date', type: 'date', dateFormat: 'm/d/Y', dataIndex: 'jningDte', sortable: true }
                ],
                forceFit: true,
                height: 210,
                width: 790,
                split: true,
                region: 'north'
            });
 
 
Ext.create('Ext.Panel', {
                renderTo: document.body,
                frame: true,
                title: 'Book List',
                width: 900,
                height: 400,
                layout: 'border',
                items: [
                grid,
             
                ]
            });
    store.load();
        });
    </script>
  
Complete code 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <script type="text/javascript">
        Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.panel.*',
        'Ext.layout.container.Border'
        ]);
 
        Ext.onReady(function () {
            Ext.define('Task', {
                extend: 'Ext.data.Model',
 
                proxy: {
                    type: 'ajax',
                    reader: 'xml'
                },
                fields: [
                { name: 'empId', type: 'int' },
                { name: 'name', type: 'string' },
                { name: 'dptCode', type: 'int' },
                { name: 'dpt', type: 'string' },
                { name: 'yrlyPckge', type: 'float' },
                { name: 'jningDte', type: 'date', dateFormat: 'm/d/Y' }
                ]
            });
 
            var data = [
          
            { empId: 101, name: 'Olivia', dptCode: 121, dpt:'IT',yrlyPckge: 20, jningDte: '07/05/2013'},
            { empId: 101, name: 'Mason', dptCode: 104, dpt:'Management',yrlyPckge: 10, jningDte: '07/06/2007'},
            { empId: 102, name: 'Noah', dptCode: 105, dpt:'Hr',yrlyPckge: 14, jningDte: '07/01/2016'},
            { empId: 102, name: 'Jacob', dptCode: 121, dpt:'IT',yrlyPckge: 12, jningDte: '07/02/2012'},
            { empId: 114, name: 'Harper', dptCode: 104, dpt:'Management',yrlyPckge: 16, jningDte: '07/05/2014'];
 
            //create the Data Store
            var store = Ext.create('Ext.data.Store', {
                model: 'Task',
                data: data,
                sorters: { property: 'due', direction: 'ASC' },
                groupField: 'project'
            });
 
            //create the grid
            var grid = Ext.create('Ext.grid.Panel', {
                bufferedRenderer: false,
                store: store,
                columns: [
{ text: 'EmployeeId', width: 120,dataIndex: 'empId',sortable: true },
                { text: 'Name', type: 'string', dataIndex: 'name', sortable: true },
                { text: 'Department code', type: 'int', dataIndex: 'dptCode', sortable: true },
                { text: 'Department', type: 'string', dataIndex: 'dpt', sortable: true },
                { text: 'Annual Package(in Lacs)', type: 'float', dataIndex: 'yrlyPckge', sortable: true },
                { text: 'Joining Date', type: 'date', dateFormat: 'm/d/Y', dataIndex: 'jningDte', sortable: true }
                ],
                forceFit: true,
                height: 210,
                width: 790,
                split: true,
                region: 'north'
            });
 
 
Ext.create('Ext.Panel', {
                renderTo: document.body,
                frame: true,
                title: 'Book List',
                width: 900,
                height: 400,
                layout: 'border',
                items: [
                grid,
               
                ]
            });
    store.load();
        });
    </script>
</head>
<body>
 
</body>
</html>
 



  Modified On Nov-30-2017 06:39:23 AM

Leave Comment