Sencha ExtJS 5 Checkbox DataBinding

Posted by Peter Kellner on July 09, 2014 · 1 min read

I often find that something does not work as I expect and I have to take the problem to bits.  In this case, I was expecting to post a bug to the Sencha team about DataBinding and checkbox field but as is often the case, making the simple example brings out the correct solution and understanding.  So, in light of sharing, here is my simple working example of two way databinding with Sencha’s ExtJS 5.

You can see from the example and code that 1,true (and “on” not shown) all check the box as you would expect.

image

image

image

Ext.application({
    name: 'ProblemBindApp',

    launch: function () {
        Ext.create('Ext.container.Viewport', {
            autoShow: true,
            viewModel: {
                data: {
                    content: 'Some Content',
                    approved: false
                }
            },
            layout: 'fit',
            items: [
                {
                    xtype: 'form',
                    title: 'my title',
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'approved as textfield:',
                            bind: '{approved}'
                        },
                        {
                            xtype: 'checkboxfield',
                            fieldLabel: 'approved as checkboxfield:',
                            bind: '{approved}'
                        }
                    ]
                }
            ]
        });
    }
});