Hybrid View

  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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi