PDA

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



RichBayliss
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:


[{"@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:


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:


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.

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

http://mothereff.in/js-variables#%40attributes

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

http://mothereff.in/js-variables#%40attributes

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.