Use of grid view in a single html page in sencha ExtJs

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

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
 
</body>
</html>

Insert following link and cdn between head open and close tag

     <linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
    <scripttype="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

<scripttype="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

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
    <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <scripttype="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>

articles

Use of grid view in a single html page in sencha ExtJs

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

What is grid view?

Create your Html page

How to create a grid view with data binding in same page

create the Data Store

create the grid

Complete code

Hemant Patel

Leave Comment

Comments

Liked By