Sorry for the long title, but this issue is difficult to explain in a short one-liner

I have a store which is pulling JSON data from a PHP backend, and presenting it in a nice model. Example JSON data would be:

Code:
[{"@attributes":{"name":"em1"},"label":"LAN","ipv4":{}},{"@attributes":{"name":"em2"},"label":"WAN"},{"@attributes":{"name":"em3"},"label":"OPT1","ipv4":{"address":"10.0.0.1","netmask":"255.0.0.0"}}]
In the above data, there are 3 objects, representing ethernet interfaces - and there is an object which represents the IPv4 state for that interface:
  • Missing object = No IPv4
  • Empty object = DHCP
  • Populated object = Static IP
I would like to map this onto a form, whereby I can show/hide the Address/Netmask fields based on a combo for IPv4 status. I have the following in my model:

Code:
Ext.define('App.model.ConfigInterface', {
    extend: 'Ext.data.Model',
    fields: [
        'label',
        'ipv4',
{ name: 'addressType', convert: function (v, record) {
            return record.raw.ipv4 == undefined ? "Disabled" : record.raw.ipv4.address == undefined ? "DHCP" : "Static";
        }},

        { name: 'ipv4address', mapping: 'ipv4.address' },
        { name: 'ipv4netmask', mapping: 'ipv4.netmask' },
        { name: 'name', mapping: '["@attributes"].name'}
    ],
    idProperty: 'name'
});
Which pulls the data as expected. In my form I have the following:

Code:
var self = this;
        var record = this.record;


        var addressTypes = Ext.create('Ext.data.Store', {
            fields: ['option'],
            data: [
                { option: 'Disabled' },
                { option: 'DHCP' },
                { option: 'Static' }
            ]
        });


        var form;
        var formAddressTypeChange = function (sender) {


            console.log(sender.value);


            var addr = form.getComponent('staticAddress');
            var netmask = form.getComponent('staticNetmask');


            if (sender.value == 'Static') {
                addr.show();
                netmask.show();
            } else {
                addr.hide();
                netmask.hide();
            }
        };
        console.log(record.data);
        form = Ext.create('Ext.form.Panel', {


            margin: '5px',
            border: false,
            record: record,
            items: [
                {
                    xtype: 'textfield',
                    name: 'label',
                    fieldLabel: 'Label'
                },
                {
                    xtype: 'combo',
                    name: 'addressType',
                    fieldLabel: 'IPv4',
                    store: addressTypes,
                    dataField: 'option',
                    displayField: 'option',
                    listeners: {
                        'change': formAddressTypeChange,
                        'activate': formAddressTypeChange
                    }
                },
                {
                    itemId: 'staticAddress',
                    xtype: 'textfield',
                    name: 'ipv4.address',
                    fieldLabel: 'Address'
                },
                {
                    itemId: 'staticNetmask',
                    xtype: 'textfield',
                    name: 'ipv4netmask',
                    fieldLabel: 'Netmask'
                }
            ]
        });




        this.items = [
            form
        ];
// load the record into the form
        form.loadRecord(record);
In the above, my netmask shows fine (pulled from the mapped field) - but my address does not (pulled from the mapped field containing the object)

I am very new to ExtJS so maybe I missed something simple, but if anyone can help point me in the right direction I would be very grateful.