Ext JS 6 Example: CRUD in Form, Grid and Paging in Grid Demo

                    /**
 * This class is the controller for the main view for the application. It is specified as
 * the "controller" of the Main view class.
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('School.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

    onItemSelected: function (sender, record) {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    onConfirm: function (choice) {
        if (choice === 'yes') {
            //
        }
    }
});

/**
 * This class is the view model for the Main view of the application.
 */
Ext.define('School.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.main',

    data: {
        name: 'School',

        loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }

    //TODO - add data, formulas and/or methods to support your view
});

Ext.define('School.view.student.StudentFormController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.student-form',

    onCreateClick: function (sender, record) {
        var studentForm = this.getView().getForm();

        if (!studentForm.isDirty()) {
            Ext.Msg.alert('Status', 'No new data to create.');
            return;
        }
        else if (!studentForm.isValid()) {
            Ext.Msg.alert('Status', 'Invalid data.');
            return;
        }

        // Submit the Ajax request and handle the response
        studentForm.submit({
            url: '/api/student',
            waitMsg: 'Saving..',
            headers:
            {
                'Content-Type': 'application/json'
            },
            clientValidation: true,
            submitEmptyText: true,
            success: function (form, action) {

                var student = Ext.create('School.model.Student');
                var resp = Ext.decode(action.response.responseText);

                if (resp.data[0]) {
                    // addstudent returns student model with Id so we can re-load model into form so form will have isDirty false
                    student.set(resp.data[0]);
                    studentForm.loadRecord(student);
                }

                Ext.Msg.alert('Status', 'Saved successfully.');

            },
            failure: function (form, action) {
                if (action.failureType === Ext.form.action.Action.CLIENT_INVALID) {
                    Ext.Msg.alert('CLIENT_INVALID', 'Something has been missed. Please check and try again.');
                }
                if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                    Ext.Msg.alert('CONNECT_FAILURE', 'Status: ' + action.response.status + ': ' + action.response.statusText);
                }
                if (action.failureType === Ext.form.action.Action.SERVER_INVALID) {
                    Ext.Msg.alert('SERVER_INVALID', action.result.message);
                }
            }
        });
    },

    onReadClick: function (sender, record) {
        var studentForm = this.getView().getForm();

        //result should contain success=true and data property otherwise it will go to failure even if there is no failure
        studentForm.load({
            waitMsg: 'Loading...',
            method: 'GET',
            params:
            {
                id: 1
            },
            success: function (form, action) {
                try {
                    var resp = Ext.decode(action.response.responseText);

                    if (resp.data.length > 0) {
                        // addstudent returns student model with Id so we can re-load model into form so form will have isDirty false
                        var student = Ext.create('School.model.Student');
                        student.set(resp.data[0]);
                        studentForm.loadRecord(student);
                    }
                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Exception: ' + ex.Message);

                }
            },
            failure: function (form, action) {
                Ext.Msg.alert("Load failed", action.result.errorMessage);
            }
        });
    },

    onUpdateClick: function (sender, record) {
        var studentForm = this.getView().getForm();

        if (!studentForm.isDirty()) {
            Ext.Msg.alert('Status', 'No pending changes to save.');
            return;
        }
        else if (!studentForm.isValid()) {
            Ext.Msg.alert('Status', 'Invalid data.');
            return;
        }

        studentForm.submit({
            url: '/api/student',
            waitMsg: 'Updating..',
            method: 'PUT',
            headers:
            {
                'Content-Type': 'application/json'
            },
            clientValidation: true,
            success: function (form, action) {
                try {
                    var student = Ext.create('School.model.Student');
                    var resp = Ext.decode(action.response.responseText);

                    if (resp.data.length > 0) {
                        // addstudent returns student model with Id so we can re-load model into form so form will have isDirty false
                        student.set(resp.data[0]);
                        studentForm.loadRecord(student);
                    }

                    Ext.Msg.alert('Status', 'Saved successfully.');
                }
                catch (ex) {
                    Ext.Msg.alert('Status', 'Exception: ' + ex.Message);

                }
            },
            failure: function (form, action) {
                if (action.failureType === Ext.form.action.Action.CLIENT_INVALID) {
                    Ext.Msg.alert('CLIENT_INVALID', 'Something has been missed. Please check and try again.');
                }
                if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                    Ext.Msg.alert('CONNECT_FAILURE', 'Status: ' + action.response.status + ': ' + action.response.statusText);
                }
                if (action.failureType === Ext.form.action.Action.SERVER_INVALID) {
                    Ext.Msg.alert('SERVER_INVALID', action.result.message);
                }
            }
        });
    },
    onDeleteClick: function (sender, record) {
        var me = this,
            studentForm = me.getView();

        if (!studentForm.getValues(false, false, false, true).Id) {
            Ext.Msg.alert('Status', 'Invalid or No data to delete.');
            return;
        }

        var student = Ext.create('School.model.Student'), data;

        student.set(studentForm.getValues());
        data = student.getData();

        Ext.Msg.show({
            title: 'Delete',
            msg: 'Do you want to delete this record? ',
            width: 300,
            closable: false,
            buttons: Ext.Msg.YESNO,
            icon: Ext.Msg.QUESTION,
            fn: function (buttonValue, inputText, showConfig) {
                if (buttonValue === 'yes') {

                    studentForm.submit({
                        url: '/api/student',
                        method: 'DELETE',
                        clientValidation: true,
                        waitMsg: 'Deleting..',
                        headers:
                        {
                            'Content-Type': 'application/json'
                        },

                        success: function (form, action) {
                            try {
                                var resp = Ext.decode(action.response.responseText);
                                studentForm.clearForm();

                                Ext.Msg.alert('Success', resp.message);
                            }
                            catch (ex) {
                                Ext.Msg.alert('Status', 'Exception: ' + ex.Message);

                            }
                        },
                        failure: function (form, action) {
                            if (action.failureType === Ext.form.action.Action.CLIENT_INVALID) {
                                Ext.Msg.alert('CLIENT_INVALID', 'Something has been missed. Please check and try again.');
                            }
                            if (action.failureType === Ext.form.action.Action.CONNECT_FAILURE) {
                                Ext.Msg.alert('CONNECT_FAILURE', 'Status: ' + action.response.status + ': ' + action.response.statusText);
                            }
                            if (action.failureType === Ext.form.action.Action.SERVER_INVALID) {
                                Ext.Msg.alert('SERVER_INVALID', action.result.message);
                            }
                        }
                    });
                }
            }

        });
    },
    onResetClick: function (sender, record) {
        this.getView().getForm().reset();
    },
    onClearClick: function (sender, record) {
        this.getView().clearForm();
    },

});

Ext.define('School.view.student.StudentListController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.student-list',

    onAddClick: function (sender, record) {

        var studentStore = this.getViewModel().getStore('StudentListStore');

        //adding dummy student
        var studentModel = Ext.create('School.model.Student');
        studentModel.set("Id", 0);
        studentModel.set("firstName", "New Student");
        studentModel.set("middleName", "");
        studentModel.set("lastName", "");
        studentModel.set("birthDate", "");
        studentModel.set("city", "");
        studentModel.set("state", "");

        studentStore.insert(0, studentModel);

        var studentGrid = this.getView();
        studentGrid.editingPlugin.startEdit(studentModel, 1);
       
    },

    onLoadClick: function (sender, record) {
        var studentStore = this.getView().getStore();
        studentStore.load();
    },

    onRemoveClick: function (sender, record) {
        var studentGrid = this.getView();
        var studentStore = studentGrid.getStore();

        //delete selected rows if selModel is checkboxmodel
        var selectedRows = studentGrid.getSelectionModel().getSelection();

        studentStore.remove(selectedRows);
    },

    onSelectionChange: function (sender, record, isSelected) {
        var removeBtn = this.lookupReference('btnRemoveStudent');
        if(record.length)
            removeBtn.setDisabled(false);
        else
            removeBtn.setDisabled(true);
    }
});

Ext.define('School.model.Student', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',

    schema: {
        namespace: 'School.model'
    },
    fields: [
        { name: 'Id', type: 'int' },
        { name: 'firstName', type: 'string' },
        { name: 'middleName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'birthDate', type: 'date' },
        { name: 'address1', type: 'string' },
        { name: 'address2', type: 'string' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' }
    ]
});

Ext.define('School.view.student.StudentViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.studentviewmodel',
    stores: {
        StudentListStore: {
            model: 'School.model.Student',
            autoLoad: true,
            autoSync: true,
            proxy:
            {
                type: 'rest',
                reader:
                {
                    rootProperty: 'data',
                    type: 'json'
                },
                url: '/api/student',
                writer: {
                    type: 'json',
                    dateFormat: 'd/m/Y',
                    writeAllFields: true
                }
            }
        },
        StudentListPagingStore: {
            model: 'School.model.Student',
            autoLoad: true,
            pageSize: 5,
            proxy:
           {
               type: 'rest',
               reader:
               {
                   rootProperty: 'data',
                   type: 'json',
                   totalProperty: 'TotalCount'
               },
               url: '/api/student'
           }
        }

    }
});

/**
 * The main application class. An instance of this class is created by app.js when it
 * calls Ext.application(). This is the ideal place to handle application launch and
 * initialization details.
 */
Ext.define('School.Application', {
    extend: 'Ext.app.Application',
    
    name: 'School',

    stores: [
        // TODO: add global / shared stores here
    ],
    
    launch: function () {
        // TODO - Launch the application
    },

    onAppUpdate: function () {
        Ext.Msg.confirm('Application Update', 'This application has an update, reload?',
            function (choice) {
                if (choice === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting automatically applies the "viewport"
 * plugin causing this view to become the body element (i.e., the viewport).
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('School.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',

        'School.view.main.MainController',
        'School.view.main.MainModel',
        'School.view.student.StudentForm',
        'School.view.student.StudentList'
    ],

    controller: 'main',

    ui: 'navigation',

    tabBarHeaderPosition: 1,
    titleRotation: 0,
    tabRotation: 0,

    header: {
        layout: {
            align: 'stretchmax'
        },
        title: {
            bind: {
                text: '{name}'
            },
            flex: 0
        },
        iconCls: 'fa-th-list'
    },

    tabBar: {
        flex: 1,
        layout: {
            align: 'stretch',
            overflowHandler: 'none'
        }
    },

    responsiveConfig: {
        tall: {
            headerPosition: 'top'
        },
        wide: {
            headerPosition: 'left'
        }
    },

    defaults: {
        bodyPadding: 20,
        tabConfig: {
            plugins: 'responsive',
            responsiveConfig: {
                wide: {
                    iconAlign: 'left',
                    textAlign: 'left'
                },
                tall: {
                    iconAlign: 'top',
                    textAlign: 'center',
                    width: 120
                }
            }
        }
    },

    items: [{
        title: 'Student Form',
        iconCls: 'fa-user',
        items: [{
            xtype: 'studentForm',
            reference:'studentEntryForm'
        }]
    }, {
        title: 'Student Grid',
        iconCls: 'fa-users',
        items: [{
            xtype: 'studentList',
            reference: 'studentGrid'
        }]
    },
    {
        title: 'Student Grid - Paging',
        iconCls: 'fa-users',
        items: [{
            xtype: 'studentListPaging'
        }]
    }]
});

/*
 * This file is generated and updated by Sencha Cmd. You can edit this file as
 * needed for your application, but these edits will have to be merged by
 * Sencha Cmd when upgrading.
 */
Ext.application({
    name: 'School',

    extend: 'School.Application',

    requires: [
        'School.view.main.Main'
    ],

    // The name of the initial view to create. With the classic toolkit this class
    // will gain a "viewport" plugin if it does not extend Ext.Viewport. With the
    // modern toolkit, the main view will be added to the Viewport.
    //
    mainView: 'School.view.main.Main'
    
    //-------------------------------------------------------------------------
    // Most customizations should be made to School.Application. If you need to
    // customize this file, doing so below this section reduces the likelihood
    // of merge conflicts when upgrading to new versions of Sencha Cmd.
    //-------------------------------------------------------------------------
});

{
    /**
     * The application's namespace.
     */
    "name": "School",
    
    /**
     * The version of the application.
     */
    "version": "1.0.0.0",

    /**
     * The relative path to the application's markup file (html, jsp, asp, etc.).
     */
    "indexHtmlPath": "index.html", 

    /**
     * Comma-separated string with the paths of directories or files to search. Any classes
     * declared in these locations will be available in your class "requires" or in calls
     * to "Ext.require". The "app.dir" variable below is expanded to the path where the
     * application resides (the same folder in which this file is located).
     */
    "classpath": [
        "app",
        "${toolkit.name}/src"
    ],

    /**
     * Comma-separated string with the paths of directories or files to search. Any classes
     * declared in these locations will be automatically required and included in the build.
     * If any file defines an Ext JS override (using Ext.define with an "override" property),
     * that override will in fact only be included in the build if the target class specified
     * in the "override" property is also included.
     */
    "overrides": [
        "overrides",
        "${toolkit.name}/overrides"
    ],

    /**
     * The Sencha Framework for this application: "ext" or "touch".
     */
    "framework": "ext",
    
    
    
    
    /**
     * The list of required packages (with optional versions; default is "latest").
     *
     * For example,
     *
     *      "requires": [
     *          "charts"
     *      ]
     */
    "requires": [
        "font-awesome"
    ],

    /**
     * Fashion build configuration properties.
     */
    "fashion": {
        "inliner": {
            /**
             * Disable resource inliner. Production builds enable this by default.
             */
            "enable": false
        }
    },

    /**
     * Sass configuration properties.
     */
    "sass": {
        /**
         * The root namespace to use when mapping *.scss files to classes in the
         * sass/src and sass/var directories. For example, "School.view.Foo" would
         * map to "sass/src/view/Foo.scss". If we changed this to "School.view" then
         * it would map to "sass/src/Foo.scss". To style classes outside the app's
         * root namespace, change this to "". Doing so would change the mapping of
         * "School.view.Foo" to "sass/src/School/view/Foo.scss".
         */
        "namespace": "School",

        /**
         * File used to save sass variables edited via Sencha Inspector. This file
         * will automatically be applied to the end of the scss build.
         *
         *      "save": "sass/save.scss"
         *
         */
         
        /**
         * Comma-separated list of files or folders containing extra Sass. These
         * files are automatically included in the Sass compilation. By default this
         * is just "etc/all.scss" to allow import directives to control the order
         * other files are included.
         *
         * All "etc" files are included at the top of the Sass compilation in their
         * dependency order:
         *
         *      +-------+---------+
         *      |       | base    |
         *      | theme +---------+
         *      |       | derived |
         *      +-------+---------+
         *      | packages        |  (in package dependency order)
         *      +-----------------+
         *      | application     |
         *      +-----------------+
         */
        "etc": [
            "sass/etc/all.scss",
            "${toolkit.name}/sass/etc/all.scss"
        ],

        /**
         * Comma-separated list of folders containing Sass variable definitions
         * files. These file can also define Sass mixins for use by components.
         *
         * All "var" files are included after "etc" files in the Sass compilation in
         * dependency order:
         *
         *      +-------+---------+
         *      |       | base    |
         *      | theme +---------+
         *      |       | derived |
         *      +-------+---------+
         *      | packages        |  (in package dependency order)
         *      +-----------------+
         *      | application     |
         *      +-----------------+
         *
         * The "sass/var/all.scss" file is always included at the start of the var
         * block before any files associated with JavaScript classes.
         */
        "var": [
            "sass/var/all.scss",
            "sass/var",
            "${toolkit.name}/sass/var"
        ],

        /**
         * Comma-separated list of folders containing Sass rule files.
         *
         * All "src" files are included after "var" files in the Sass compilation in
         * dependency order (the same order as "etc"):
         *
         *      +-------+---------+
         *      |       | base    |
         *      | theme +---------+
         *      |       | derived |
         *      +-------+---------+
         *      | packages        |  (in package dependency order)
         *      +-----------------+
         *      | application     |
         *      +-----------------+
         */
        "src": [
            "sass/src",
            "${toolkit.name}/sass/src"
        ]
    },

    /**
     * List of all JavaScript assets in the right execution order.
     *
     * Each item is an object with the following format:
     *
     *      {
     *          // Path to file. If the file is local this must be a relative path from
     *          // this app.json file.
     *          //
     *          "path": "path/to/script.js",   // REQUIRED
     *
     *          // Set to true on one file to indicate that it should become the container
     *          // for the concatenated classes.
     *          //
     *          "bundle": false,    // OPTIONAL
     *
     *          // Set to true to include this file in the concatenated classes.
     *          //
     *          "includeInBundle": false,  // OPTIONAL
     *
     *          // Specify as true if this file is remote and should not be copied into the
     *          // build folder. Defaults to false for a local file which will be copied.
     *          //
     *          "remote": false,    // OPTIONAL
     *
     *          // If not specified, this file will only be loaded once, and cached inside
     *          // localStorage until this value is changed. You can specify:
     *          //
     *          //   - "delta" to enable over-the-air delta update for this file
     *          //   - "full" means full update will be made when this file changes
     *          //
     *          "update": "",        // OPTIONAL
     *
     *          // A value of true indicates that is a development mode only dependency.
     *          // These files will not be copied into the build directory or referenced
     *          // in the generate app.json manifest for the micro loader.
     *          //
     *          "bootstrap": false   // OPTIONAL
     *      }
     *
     */
    "js": [
        {
            "path": "app.js",
            "bundle": true
        }
    ],

    
    /**
     * Settings specific to classic toolkit builds.
     */
    "classic": {
        "js": [
            // Remove this entry to individually load sources from the framework.
            {
                "path": "${framework.dir}/build/ext-all-rtl-debug.js"
            }
        ]
    },

    /**
     * Settings specific to modern toolkit builds.
     */
    "modern": {
        "js": [
            // Remove this entry to individually load sources from the framework.
            {
                "path": "${framework.dir}/build/ext-modern-all-debug.js"
            }
        ]
    },

    /**
     * List of all CSS assets in the right inclusion order.
     *
     * Each item is an object with the following format:
     *
     *      {
     *          // Path to file. If the file is local this must be a relative path from
     *          // this app.json file.
     *          //
     *          "path": "path/to/stylesheet.css",   // REQUIRED
     *
     *          // Specify as true if this file is remote and should not be copied into the
     *          // build folder. Defaults to false for a local file which will be copied.
     *          //
     *          "remote": false,    // OPTIONAL
     *
     *          // If not specified, this file will only be loaded once, and cached inside
     *          // localStorage until this value is changed. You can specify:
     *          //
     *          //   - "delta" to enable over-the-air delta update for this file
     *          //   - "full" means full update will be made when this file changes
     *          //
     *          "update": ""      // OPTIONAL
     *      }
     */
    "css": [
        {
            // this entry uses an ant variable that is the calculated
            // value of the generated output css file for the app,
            // defined in .sencha/app/defaults.properties
            "path": "${build.out.css.path}",
            "bundle": true,
            "exclude": ["fashion"]
        }
    ],

    /**
     * This option is used to configure the dynamic loader. At present these options
     * are supported.
     *
     */
     "loader": {
         // This property controls how the loader manages caching for requests:
         //
         //   - true: allows requests to receive cached responses
         //   - false: disable cached responses by adding a random "cache buster"
         //   - other: a string (such as the build.timestamp shown here) to allow
         //     requests to be cached for this build.
         //
         "cache": false,

         // When "cache" is not true, this value is the request parameter used
         // to control caching.
         //
         "cacheParam": "_dc"
     },

    /**
     * Settings specific to production builds.
     */
    "production": {
        "output": {
            "appCache": {
                "enable": true,
                "path": "cache.appcache"
            }
        },
        "loader": {
            "cache": "${build.timestamp}"
        },
        "cache": {
            "enable": true
        },
        "compressor": {
            "type": "yui"
        }
    },
    
    /**
     * Settings specific to testing builds.
     */
    "testing": {
    },
    
    /**
     * Settings specific to development builds.
     */
    "development": {
        "tags": [
            // You can add this tag to enable Fashion when using app watch or
            // you can add "?platformTags=fashion:1" to the URL to enable Fashion
            // without changing this file.
            //
            // "fashion"
        ]
    },

    /**
     * Controls the output structure of development-mode (bootstrap) artifacts. May
     * be specified by a string:
     *
     *      "bootstrap": "${app.dir}"
     *
     * This will adjust the base path for all bootstrap objects, or expanded into object
     * form:
     *
     *      "bootstrap": {
     *          "base": "${app.dir},
     *          "manifest": "bootstrap.json",
     *          "microloader": "bootstrap.js",
     *          "css": "bootstrap.css"
     *      }
     *
     * You can optionally exclude entries from the manifest. For example, to exclude
     * the "loadOrder" (to help development load approximate a build) you can add:
     *
     *      "bootstrap": {
     *          "manifest": {
     *              "path": "bootstrap.json",
     *              "exclude": "loadOrder"
     *          }
     *      }
     *
     */
    "bootstrap": {
        "base": "${app.dir}",
        
        "manifest": "${build.id}.json",
        
        "microloader": "bootstrap.js",
        "css": "bootstrap.css"
    },

    /**
     * Controls the output directory for build resources.  May be set with
     * either a string:
     *
     *      "${workspace.build.dir}/${build.environment}/${app.name}"
     *
     * or an object containing values for various types of build artifacts:
     *
     *      {
     *          "base": "${workspace.build.dir}/${build.environment}/${app.name}",
     *          "page": {
     *              "path": "../index.html",
     *              "enable": false
     *          },
     *          "css": "${app.output.resources}/${app.name}-all.css",
     *          "js": "app.js",
     *          "microloader": {
     *              "path": "microloader.js",
     *              "embed": true,
     *              "enable": true
     *          },
     *          "manifest": {
     *              "path": "app.json",
     *              "embed": false,
     *              "enable": "${app.output.microloader.enable}"
     *          },
     *          "resources": "resources",
     *          "slicer": {
     *              "path": "${app.output.resources}/images",
     *              "enable": false
     *          },
     *          // Setting the "enable" property of this object to a Truthy value will cause a Application Cache
     *          // manifest file to be generated based on this files appCache object. This file will then be injected
     *          // into the index.html file of the built application
     *          "appCache":{
     *              "enable": false"
     *          }
     *      }
     *
     */
    
    "output": {
        "base": "${workspace.build.dir}/${build.environment}/${app.name}",
        "page": "index.html",
        "manifest": "${build.id}.json",
        "js": "${build.id}/app.js",
        "appCache": {
            "enable": false
        },
        "resources": {
            "path": "${build.id}/resources",
            "shared": "resources"
        }
    },
    
    
    /**
    * Controls for localStorage caching
    *   "cache": {
    *       // This property controls whether localStorage caching of this manifest file is on or off.
    *       // if disabled no deltas will be generated during a build and full updates will be disabled
    *       "enable": false,
    *
    *       // This property allows for global toggle of deltas.
    *       // If set to a string the value will be used as the path to where deltas will be generated relative to you build.
    *       // If set to a Truthy Value the default path ok "deltas" will be used
    *       // If set to a Falsey value or if this property is not present deltas will be disabled and not generated.
    *
    *       "deltas": "deltas"
    *   }
    */
    
    "cache": {
        "enable": false,
        "deltas": "${build.id}/deltas"
    },
    

    /**
     * Used to automatically generate cache.manifest (HTML 5 application cache manifest)
     * file when you build.
     */
    "appCache": {
        /**
         * List of items in the CACHE MANIFEST section
         */
        "cache": [
            "index.html"
        ],
        /**
         * List of items in the NETWORK section
         */
        "network": [
            "*"
        ],
        /**
         * List of items in the FALLBACK section
         */
        "fallback": []
    },

    /**
     * Extra resources to be copied into the resource folder as specified in the "resources"
     * property of the "output" object. Folders specified in this list will be deeply copied.
     */
    "resources": [
        {
            "path": "resources",
            "output": "shared"
        },
        {
            "path": "${toolkit.name}/resources"
        },
        {
            "path": "${build.id}/resources"
        }
    ],

    /**
     * File / directory name patttern to ignore when copying to the builds. Must be a
     * valid regular expression.
     */
    "ignore": [
        "(^|/)CVS(/?$|/.*?$)"
    ],

    /**
     * Directory path to store all previous production builds. Note that the content
     * generated inside this directory must be kept intact for proper generation of
     * deltas between updates.
     */
    
    "archivePath": "archive/${build.id}",
    


    /**
     * The space config object is used by the "sencha app publish" command to publish
     * a version of this application to Sencha Web Application Manager:
     *
     *      "manager": {
     *          // the space id for this application
     *          "id": 12345,
     *
     *          // space host
     *          "host": "https://api.space.sencha.com/json.rpc",
     *
     *          // Either a zip file path or a folder to be zipped
     *          // this example shows how to publish the root folder for all build profiles
     *          "file": "${app.output.base}/../",
     *
     *          // These may be specified here, but are best specified in your user
     *          // ~/.sencha/cmd/sencha.cfg file
     *          "apiKey": "",
     *          "secret": ""
     *      }
     */

    /**
     * Build Profiles. This object's properties are each a "build profile". You can
     * add as many as you need to produce optimized builds for devices, themes, locales
     * or other criteria. Your "Ext.beforeLoad" hook (see index.html) is responsible for
     * selecting the desired build profile by setting "Ext.manifest" to one of these
     * names.
     *
     *     "builds": {
     *         "classic": {
     *             "toolkit": "classic",
     *             "theme": "theme-neptune"
     *         },
     *
     *         "modern": {
     *             "toolkit": "modern",
     *             "theme": "theme-neptune"
     *         }
     *     }
     *
     */
    
    "builds": {
        "classic": {
            "toolkit": "classic",
            
            "theme": "theme-triton",
            
            "sass": {
                // "save": "classic/sass/save.scss"
            }
        },

        "modern": {
            "toolkit": "modern",
            
            "theme": "theme-triton",
            
            "sass": {
                // "save": "modern/sass/save.scss"
            }
        }
    },
    

    /**
     * Uniquely generated id for this application, used as prefix for localStorage keys.
     * Normally you should never change this value.
     */
    "id": "fec7a5cc-a11f-4421-b84d-127e09d0bdf7"
}

Ext.define('School.view.student.StudentListPaging', {
    extend: 'Ext.grid.Panel',
    xtype: 'studentListPaging',

    title: 'Student List - Paging Demo',

    viewModel: { type: 'studentviewmodel' },
    selType: 'rowmodel',
    selModel:
    {
        mode: 'SINGLE'
    },
    viewConfig:
    {
        stripeRows: true
    },
    listeners: {
        selectionchange: 'onSelectionChange'
    },
    bind: {
        store: '{StudentListPagingStore}'
    },
    initComponent: function () {
        Ext.apply(this,
        {
            columns: [{
                text: "Id",
                dataIndex: 'Id',
                width: 35
            },
            {
                text: "First Name",
                flex: 1,
                dataIndex: 'firstName'
            },
            {
                text: "Middle Name",
                flex: 1,
                dataIndex: 'middleName'
            },
            {
                text: "Last Name",
                flex: 1,
                dataIndex: 'lastName'
            },
            {
                xtype: 'datecolumn',
                header: "Birth Date",
                width: 135,
                dataIndex: 'birthDate',
                renderer: Ext.util.Format.dateRenderer('d/m/Y')
            },
            {
                text: "City",
                flex: 1,
                dataIndex: 'city'
            },
            {
                text: "State",
                flex: 1,
                dataIndex: 'state'
            }],
            bbar: [{
                xtype: 'pagingtoolbar',
                bind:{
                    store: '{StudentListPagingStore}'
                },
                displayInfo: true,
                displayMsg: 'Displaying {0} to {1} of {2}  records ',
                emptyMsg: "No records to display "
            }]

        });

        this.callParent(arguments);
    }
});

Ext.define('School.view.student.StudentList', {
    extend: 'Ext.grid.Panel',
    xtype: 'studentList',

    title: 'Student List',

    controller: 'student-list',
    viewModel: { type: 'studentviewmodel' },
    reference:'studentlistgrid',
    selType: 'rowmodel',
    selModel:
    {
        mode: 'SINGLE'
    },
    viewConfig:
    {
        stripeRows: true
    },
    listeners: {
        selectionchange: 'onSelectionChange'
    },
    bind: {
        store: '{StudentListStore}'
    },
    initComponent: function () {
        Ext.apply(this,
        {
            plugins: [Ext.create('Ext.grid.plugin.RowEditing',
            {
                clicksToEdit: 2
            })],

            columns: [{
                text: "Id",
                dataIndex: 'Id',
                width: 45
            },
            {
                text: "First Name",
                flex: 1,
                dataIndex: 'firstName',
                editor:
                {
                    // defaults to textfield if no xtype is supplied
                    allowBlank: false
                }
            },
            {
                text: "Middle Name",
                flex: 1,
                dataIndex: 'middleName',
                editor:
                {
                    allowBlank: true
                }
            },
            {
                text: "Last Name",
                flex: 1,
                dataIndex: 'lastName',
                editor:
                {
                    allowBlank: true
                }
            },
            {
                xtype: 'datecolumn',
                header: "Birth Date",
                width: 135,
                dataIndex: 'birthDate',
                editor:
                {
                    xtype: 'datefield',
                    allowBlank: true
                },
                renderer: Ext.util.Format.dateRenderer('d/m/Y')
            },
            {
                text: "City",
                flex: 1,
                dataIndex: 'city',
                editor:
                {
                    allowBlank: true
                }
            },
            {
                text: "State",
                flex: 1,
                dataIndex: 'state',
                editor:
                {
                    allowBlank: true
                }
            }],
            tbar: [{
                text: 'Add Student',
                iconCls: 'fa-plus',
                handler: 'onAddClick'
            }, {
                itemId: 'removeStudent',
                text: 'Remove Student',
                iconCls: 'fa-times',
                reference: 'btnRemoveStudent',
                handler: 'onRemoveClick',
                disabled: true
            }]


        });

        this.callParent(arguments);
    }
});

Ext.define('School.view.student.StudentForm', {
    extend: 'Ext.form.Panel',

    xtype: 'studentForm',
    title: 'Student Entry Form',

    controller: 'student-form',
    initComponent: function () {
        Ext.apply(this,
        {
            //set jsonsubmit to true for CUD operation using form.Submit()
            jsonSubmit: true,
            url: '/api/student',
            resizable: false,
            collapsible: false,
            bodyPadding: '5',
            buttonAlign: 'center',
            border: false,
            trackResetOnLoad: true,
            layout:
            {
                type: 'vbox'
            },
            fieldDefaults:
            {
                xtype: 'textfield',
                msgTarget: 'side',
                labelAlign: 'top',
                labelStyle: 'font-weight:bold'
            },
            defaultType: 'textfield',
            items: [{
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    defaultType: 'textfield',
                    width: '100%',
                    fieldDefaults:
                    {
                        labelAlign: 'top',
                        labelStyle: 'font-weight:bold'
                    },
                    items: [{
                        fieldLabel: 'Id',
                        name: 'Id',
                        readOnly: true,
                        width: 55
                    },
                    {
                        fieldLabel: 'First Name',
                        flex: 1,
                        name: 'firstName',
                        margin: '0 0 0 5',
                        allowBlank: false
                    },
                        {
                            name: 'middleName',
                            width: 150,
                            margin: '0 0 0 5',
                            fieldLabel: 'Middle Name:'
                        },
                        {
                            fieldLabel: 'Last Name',
                            flex: 1,
                            margin: '0 0 0 5',
                            name: 'lastName'
                        }]
                },
                    {
                        xtype: 'datefield',
                        fieldLabel: 'Date of Birth',
                        name: 'birthDate'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Address',
                        width: '100%',
                        name: 'address1'
                    },
                    {
                        xtype: 'textfield',
                        hideLabel: true,
                        name: 'address2',
                        width: '100%',
                        fieldLabel: 'address2'

                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'City',
                        width: '100%',
                        name: 'city'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'state',
                        width: '100%',
                        name: 'state'
                    }
            ],
            buttons: [{
                text: 'Create',
                itemId: 'btnCreate',
                formBind: true,
                handler: 'onCreateClick'
            },
            {
                text: 'Read',
                itemId: 'btnLoad',
                handler: 'onReadClick'
            },

            {
                text: 'Update',
                itemId: 'btnUpdate',
                formBind: true,
                handler: 'onUpdateClick'
            },
            {
                text: 'Delete',
                itemId: 'btnDelete',
                formBind: true,
                handler: 'onDeleteClick'
            },
            {
                text: 'Reset',
                itemId: 'btnReset',
                handler: 'onResetClick'
            },
            {
                text: 'Clear',
                itemId: 'btnClear',
                handler: 'onClearClick'
            }]
        });

        this.callParent(arguments);

    },
    clearForm: function () {
        this.getForm().getFields().each(function (field) {
            field.validateOnChange = false;
            field.setValue('');
            field.resetOriginalValue();
        });
    }
});

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>MyExtJSApp</title>

    
    <script type="text/javascript">
        var Ext = Ext || {}; // Ext namespace won't be defined yet...

        // This function is called by the Microloader after it has performed basic
        // device detection. The results are provided in the "tags" object. You can
        // use these tags here or even add custom tags. These can be used by platform
        // filters in your manifest or by platformConfig expressions in your app.
        //
        Ext.beforeLoad = function (tags) {
            var s = location.search,  // the query string (ex "?foo=1&bar")
                profile;

            // For testing look for "?classic" or "?modern" in the URL to override
            // device detection default.
            //
            if (s.match(/\bclassic\b/)) {
                profile = 'classic';
            }
            else if (s.match(/\bmodern\b/)) {
                profile = 'modern';
            }
            else {
                profile = tags.desktop ? 'classic' : 'modern';
                //profile = tags.phone ? 'modern' : 'classic';
            }

            Ext.manifest = profile; // this name must match a build profile name

            // This function is called once the manifest is available but before
            // any data is pulled from it.
            //
            //return function (manifest) {
                // peek at / modify the manifest object
            //};
        };
    </script>
    
    
    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="fec7a5cc-a11f-4421-b84d-127e09d0bdf7" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>