ExtJS 5 Bind ViewModel To Template | Peter Kellner's Blog

The simplest things can often be aggravating to get right. I often find that when something does not work (especially in ExtJS 5 using View Model and Bind) that I need to make the simplest example to prove my understanding to myself. I thought I would share a very simple yet powerful example of how to bind data from a ViewModel to an xtemplate in ExtJS 5.

There are many other things you can do with databinding including modeling selected row in a grid as well as nice integration with formulas. The below example is just a very simple case that proves it works which is often all I need.

Notice that in the code below I’ve created a very simple viewport with just one item. The two big takeaways are:

The data must be enclosed in the bind attribute

The tpl (template) is not in a bind attribute

Hope this helps someone struggling also.

Ext.onReady(function() {
    Ext.create({
        xtype: 'viewport',
        viewModel: {
            data: {
                viewModelAddress: '200 main street'
            }
        },
        items: [{
            bind: {
                data: {
                    address: '100 main street',
                    viewModelAddress: '200 main street'
            }
        },
        tpl: <span class="str">'address: {address}&lt;br/&gt;viewModelAddress: {viewModelAddress}'</span>
    }],
    renderTo: Ext.getBody()
});
});

https://fiddle.sencha.com/#fiddle/9is