Skip to content

February 12, 2016

Sencha Architect: How to use ViewModel to Bind Store into Grid Panel

by Joe Kuan

In ExtJs (5+), one of the major features is MVVM (Model-View-ViewModel). It is an alternative approach of MVC. Basically, MVVM enables each view component have it’s own ViewController and ViewModel classes. This offers a number of benefits, better code management, smaller memory footprint, and better integration with automated tests. In this article, we explore how to use Sencha Architect to setup ViewModel relationship.

In this exercise, we are going to create a simple grid application retrieving data from a Json store reading file from the server. The following is the Json data returning from the web server which is a simple name and value pairs:

{  "rows": [{
      "name": "Apple", "value": 3
    }, {
      "name": "Banana", "value":5 
    }, {
      "name": "Cherry", "value": 10
    }, {
      "name": "Date", "value": 1
    }]
}

Lets create a simple grid application on Sencha Architect with viewport and then we add a Grid Panel into the Views category.

screen

Next step is to create a Model, NameValuePair, with name and value fields:
screen

Then opens the MyViewportViewModel class and selects option Stores
screen

In the bottom Config properties panel, adds a Store property
screen

This will create an entry inside the Stores option. Then we select the new entry and configure the properties as follows:

  • name – enters value: NameValueStore
  • autoLoad – checks to true
  • model – selects NameValuePair
  • Proxy – adds an Ajax Proxy. Insides the Ajax Proxy
    • sets the url to the server’s json file (in this example: “/data.json”)
    • adds a Json Reader and sets the rootProperty to ‘rows’ to match format of our returning Json data

The generated code for the ViewModel class should look like below:

Ext.define('MyApp.view.MyViewportViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewport',

    requires: [
        'Ext.data.Store',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    stores: {
        NameValueStore: {
            autoLoad: true,
            model: 'MyApp.model.NameValuePair',
            proxy: {
                type: 'ajax',
                url: '/data.json',
                reader: {
                    type: 'json',
                    rootProperty: 'rows'
                }
            }
        }
    }

});

Next step is to bind the View component (grid) to it’s ViewModel class. Selects the grid component in the Inspector panel. In the bottom Config panel, clicks the magnet icon (it turns red) of the store option to enable the binding for the NameValueStore object (from the ViewModel class).
screen
The final step is to tidy up the column settings and dataIndex to match the data model. The final code for the View component should look like this:

Ext.define('MyApp.view.MyViewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.myviewport',

    requires: [
        'MyApp.view.MyViewportViewModel',
        'Ext.grid.Panel',
        'Ext.grid.column.Column',
        'Ext.view.Table'
    ],

    viewModel: {
        type: 'myviewport'
    },

    items: [
        {
            xtype: 'gridpanel',
            title: 'My Grid Panel',
            bind: {
                store: '{NameValueStore}'
            },
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'name',
                    text: 'Name'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'value',
                    text: 'Value'
                }
            ]
        }
    ]

});

Then publishes the application, here is the screen output of our simple MVVM app with store.
screen

Note: if you have an existing store object inside the Stores category, you can drag and drop the store into a ViewModel’s Stores option.

screen (1)
It really depends on whether your store object is required access by other top level view components in the application. If not, then it is worth setting up to be part of the ViewModel class. Remember, this implies the store object is only created during the life time of the view component, instead of the application life time.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: