1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    RichBayliss is on a distinguished road

      0  

    Default Unanswered: Binding model to form field, where model is from JSON store and field is an object

    Unanswered: Binding model to form field, where model is from JSON store and field is an object


    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.

  2. #2
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Answers
    24
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      0  

    Default


    @attributes is an invalid variable name

    http://mothereff.in/js-variables#%40attributes
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    RichBayliss is on a distinguished road

      0  

    Default


    Quote Originally Posted by dawesi View Post
    @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.

Thread Participants: 1

Tags for this Thread