In this section we have create user interface(UI).In UI we write the code of grid view that’s provide the facility to update and cancel,when we create a new row in grid.

In view folder under your application folder

Ext.define('app.view.StudentView',//Define StudentView Class
{
    extend: 'Ext.grid.Panel',//Extend grid.Panel class
    alias: 'widget.StudentView',//For derect accessing in other files without giving path
 
    initComponent: function () {
        Ext.apply(this, {
plugins: {                             //Used plugins for row editing in grid view
                ptype: 'rowediting',
                clicksToEdit: 2,
                pluginId: 'roweditingId',
            },
            columns: [{             //Grid view fields(Column name)
                text: "Id",
                dataIndex: 'Id',
                hidden: false,
                width: 35
            },
            {
                text: "First Name",
                flex: 1,
                dataIndex: 'firstName',
                editor:
                {
                    allowBlank: false
                }
            },
            {
                text: "Middle Name",
                flex: 1,
                dataIndex: 'middleName',
                editor:
                {
                    allowBlank: true
                }
            },
            {
                text: "Last Name",
                flex: 1,
                dataIndex: 'lastName',
                editor:
                {
                    allowBlank: true
                }
            },
            {
                text: "Birth Date",
                flex: 1,
                dataIndex: 'birthDate',
                editor:                  //Use editor for dateField in grid view
                {
                    xtype: 'datefield',
                    format: 'd-m-Y',
                    allowBlank: true
                },
            },
            {
                text: "City",
                flex: 1,
                dataIndex: 'city',
                editor:
                {
                    allowBlank: true
                }
            },
            {
                text: "State",
                flex: 1,
                dataIndex: 'state',
                editor:
                {
                    allowBlank: true
                }
            }],
            dockedItems: [{         //Docked item in toolbar
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                layout:            //Defined layout property
                {
                    pack: 'center'   //For alignment in center
                },
                defaults:
                {
                    minWidth: 80
                },
                items: [{            //Buttons in grid view 
                    text: 'Create',
                    itemId: 'btnCreate'
                }, {
                    text: 'Load Data',
                    itemId: 'btnLoad'
                }, {
                    text: 'Save',
                    itemId: 'btnSave'
                }, {
                    text: 'Delete',
                    itemId: 'btnDelete'
                }]
            }]
        });
        this.callParent(arguments);
    }
});
 

In model folder under your application folder

Ext.define('app.model.StudentModel', {   //Define student model
    extend: 'Ext.data.Model',      //Extend data.Model class 
    idProperty: 'Id',
    fields: [            //Define property of fields that’s can be used in UI
        { name: 'Id', type: 'int', defaultValue: 0 },
        { name: 'firstName', type: 'string' },
        { name: 'middleName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'birthDate', type: 'date' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' }
    ],
    validations: [{                    //validation for specific field
        type: 'presence',
        field: 'firstName'
    }],
    proxy:
        {
            type: 'ajax',
            reader:
                {
                    root: 'data',
                    type: 'json'
                },
            api:
                {
                    read: './user/student',
                    create: './user/createstudent',
                    update: './user/updatestudent',
                    destroy: './user/deletestudent'
                },
            actionMethods:
                {
                    destroy: 'POST',
                    read: 'GET',
                    create: 'POST',
                    update: 'POST'
                }
        }
});

In controller folder under your application folder

Ext.define('app.controller.StudentController', //Define path of controller and make
    {                                            object of class if its not present
        extend: 'Ext.app.Controller',//Extend Controller class
        models: ['app.model.StudentModel'],//import model with defining its path
        stores: ['app.store.StudentStore'],//import store with defining its path
        views: ['app.view.StudentView'],//import view with defining its path
        refs: [{
            ref: 'StudentView',
            selector: 'viewport StudentView'
        }],
 
        init: function () {  Defined function that’s call on button click
            this.control({
                'viewport>StudentView button[itemId=btnCreate]':
                    {
                        click: this.onCreateClick
                    },
                'viewport>StudentView button[itemId=btnLoad]':
                    {
                        click: this.onLoadClick
                    },
                'viewport>StudentView button[itemId=btnSave]':
                    {
                        click: this.onSaveClick
                    },
                'viewport>StudentView button[itemId=btnDelete]':
                    {
                        click: this.onDeleteClick
                    }
            });
        },
        onCreateClick: function () { //define function on create
            var studentView = this.getStudentView();
            var studentStore = studentView.getStore();
 
            var studentModel = Ext.create('app.model.StudentModel');
            //studentModel.set("Id","");
            studentModel.set("firstName", "First name");
            studentModel.set("middleName", "Middle name");
            studentModel.set("lastName", "Last name");
            studentModel.set("birthDate", " ");
            studentModel.set("city", "City");
            studentModel.set("state", "State");
 
            studentStore.add(studentModel);
            studentView.editingPlugin.startEdit(studentModel, 3);
        },
 
        onSaveClick: function () {//define function on Save
            var studentView = this.getView();
            var studentStore = studentView.getStore();
 
            studentStore.sync({
                success: function (batch, eOpts) {
                    Ext.Msg.alert('Status', 'Changes saved successfully');
                },
                failure: function (batch, eOpts) {
                    Ext.Msg.alert('Status', 'Request failed.');
                }
            });
        },
 
        onLoadClick: function () {   //define function on Load
            var studentStore = Ext.getStore('app.store.StudentStore');
            studentStore.load();
        },
 
        onDeleteClick: function () {       //define function on Delete
            var studentView = this.getStudentView();
            var studentStore = studentView.getStore();
 
            var selectedRows = studentView.getSelectionModel().getSeletion();
            if (selectedRows.length)
                studentStore.remove(selectedRows);
            else
                Ext.Msg.alert('Status', 'please select at least one record to delete!');
        }
    });
 

In store folder under your application folder

Ext.define('app.store.StudentStore',//defined store with its path
    {
        extend: 'Ext.data.Store',// Extend store class
        model: 'app.model.StudentModel',//Import model for giving its path
        autoLoad: false,
        storeId: 'StudentDataStore'
    });
 

We can add a javascript page name as app.js and write code in this page

Ext.application({
    requires: ['Ext.container.Viewport'],
    controllers: ['StudentController'],
    name: 'app',
    launch: function () {   //create launch function for call view(UI)
        Ext.create('Ext.container.Viewport', {
            layout: 'anchor',
            items: [{
                xtype: 'StudentView'
            }]
        });
    }
});
 

html page for import all important scripts including app.js

<!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"src="app.js"></script>
</head>
<body>
</body>
</html>