---

• Next »
• « Previous

Session:

Ext JS 5 introduced Ext.data.Session. Session can be associated with any UI component, ViewModel or Store. It manages the data and handles CRUD operation, once the data is loaded into it.

Apply session : true config to any UI component in order to create a new Session and attach to it. All the child components can spawn from the current parent Session.

Let's look at an example of how a session manages data of two stores and perform CRUD operation.

We will build UI with two editable gridd, student and state as shown below. We will create a session and use it to manage CRUD operation for both grids.

First, create a viewport as shown below.

Ext.application({
    name: 'SchoolApp',
    autoCreateViewport: false,
    views: ['SchoolApp.view.student.StudentList', 'SchoolApp.view.student.StateList'],
    requires: ['SchoolApp.view.student.StudentViewModel'],

    launch: function () {

        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            dock: 'top',
            viewModel: {
                type: 'StudentViewModel'
            },
            session: true,
            items: [
                {
                    region: 'north',
                    xtype: 'toolbar',
                    items: [{
                        text: 'Save Batch',
                        handler: function () {
                            try {
                                var viewport = this.up().up();
                                var ses = viewport.getSession();

                                var batch = ses.getSaveBatch();

                                batch.on({
                                    complete: function () {
                                        Ext.Msg.alert('Status', 'Data Saved Successfully!');
                                    },
                                    exception: function () {
                                        Ext.Msg.alert('Error', 'Error occurred');
                                    }
                                });

                                batch.start();
                            }
                            catch (ex) {
                                Ext.Msg.alert('Error', ex.message);
                            }
                        }
                    },
                    {
                        text: 'Show Changes',
                        handler: function () {
                            var viewport = this.up().up();
                            var ses = viewport.getViewModel().getSession();
                            var changes = ses.getChanges();

                            if (!changes) {
                                Ext.Msg.alert('Status', 'No Changes');
                                return;
                            }

                            if (changes.State && changes.State.U) // if state updated
                            {
                                var changedStateNames = "Changed State Names: ";
                                for (var i = 0; i < changes.State.U.length ; i++) {
                                    changedStateNames += changes.State.U[i].name + ", ";
                                }

                                Ext.Msg.alert('Status', changedStateNames);
                            }

                            if (changes.Student && changes.Student.U) { // if student updated
                                var changedStudentNames = "Changed Student Names: ";
                                for (var i = 0; i < changes.Student.U.length ; i++) {
                                    changedStudentNames += changes.Student.U[i].firstName + ", ";
                                }

                                Ext.Msg.alert('Status', changedStudentNames);
                            }
                        }
                    }]
                },
                {
                    region: 'center',
                    xtype: 'StudentList',
                    bind: { store: '{students}' },
                    flex: 1
                },
                {
                    xtype: 'StateList',
                    region: 'south',
                    bind: { store: '{states}' },
                    flex: 1
                }]
        });
    }
});

In the above example, we have attached StudentViewModel and specified session:true. Viewport includes StudentList and StateList grids as its child items.

The following is a StudentViewModel.

Ext.define('SchoolApp.view.student.StudentViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.StudentViewModel',

    stores: {
        students: {
            model: 'SchoolApp.model.Student',
            session: true,
            autoLoad: true,
            sorters: [{
                property: 'firstName',
                direction:'DESC'
            }]
        },
        states: {
            model: 'SchoolApp.model.State',
            session: true,
            autoLoad: true,
            sorters: [{
                property: 'name',
                direction: 'ASC'
            }]
        }
    }
});

In the above StudentViewModel, we have specified two stores, students and states. We have also specified session config for both the stores. This session will manage the data loaded into students and states stores.

Use getChanges() method of session to get the list of records which have changed. Use getSaveBatch() method to perform CRUD operation on the changed records. The following code shows how to submit changed records to the remote server.

try 
    {
        var viewport = this.up().up();
        var ses = viewport.getSession();

        var batch = ses.getSaveBatch();

        batch.on({
            complete: function () {
                Ext.Msg.alert('Status', 'Data Saved Successfully!');
            },
            exception: function () {
                Ext.Msg.alert('Error', 'Error occurred');
            }
        });

        batch.start();
    }
    catch (ex) {
        Ext.Msg.alert('Error', ex.message);
    }

In the above example, we get the reference of viewport and then get the session of viewport using getSession() method. The getSaveBatch() method returns Ext.data.Batch which can be used to perform batch operation.

Live Example

---

---

• Next »
• « Previous