View Full Version : Binding model to form field, where model is from JSON store and field is an object

19 Mar 2013, 6:14 PM
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:


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:

Ext.define('App.model.ConfigInterface', {
extend: 'Ext.data.Model',
fields: [
{ 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:

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) {


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

if (sender.value == 'Static') {
} else {
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 = [
// load the record into the form

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.

20 Mar 2013, 1:16 AM
@attributes is an invalid variable name


20 Mar 2013, 2:39 AM
@attributes is an invalid variable name


Indeed. However in my case that structure isn't causing me any issue. The mapping for the interface name is working as expected and a 2-way bind is acheived within the form.