Integer model with checkbox

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.1/resources/css/ext-all-gray.css">

JavaScript

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'flag',
            type: 'int',
            convert: function (v, record) {
                return typeof v === 'boolean' ? (v === true ? '1' : 0) : v;
            }
        }
    ],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

Ext.create('Ext.form.Panel', {
    bodyPadding: 10,
    width: 300,
    title: 'Pizza Order',
    items: [
        {
            xtype: 'fieldcontainer',
            fieldLabel: 'Toppings',
            defaultType: 'checkboxfield',
            items: [
                {
                    boxLabel  : 'Topping?',
                    name      : 'flag',
                    id        : 'checkbox1',
                    inputValue: 1,
                    uncheckedValue: 0,
                }
            ]
        }
    ],
    renderTo: Ext.getBody()
});

Ext.create('Ext.button.Button', {
    text: 'Save Record',
    renderTo: Ext.getBody(),
    listeners: {
        click: function(button) {
            var form = Ext.ComponentQuery.query('form')[0];
            form.getForm().updateRecord();
            var rec = form.getRecord();
            Ext.MessageBox.show({
                title:'Serialized model',
                msg: Ext.encode(model.data),
            });
        }
    }
});

Ext.onReady(function() {
    model = Ext.create('MyModel', {flag: 1});
    var form = Ext.ComponentQuery.query('form')[0];
    form.loadRecord(model);
});