1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    5
    Vote Rating
    0
    metaldeth81 is on a distinguished road

      0  

    Default Form loadRecord() not populating fields

    Form loadRecord() not populating fields


    I hacked up the "xml-form" example to use a AJAX/Json data source.

    The record (I know mapping is redundant for this example, just trying things):
    Code:
    var Settings = Ext.data.Record.create([
               {name: 'gpsThreshold', mapping:'gpsThreshold'},
               {name: 'vitalsFrequency', mapping:'vitalsFrequency'},
               {name: 'miaTime', mapping:'miaTime'},
               {name: 'unavailabilityTime', mapping:'unavailabilityTime'},
               {name: 'posFrequency', mapping:'posFrequency'},
               {name: 'timezone', mapping:'timezone'},
               {name: 'hbFrequency', mapping:'hbFrequency'}       
           ]);
    The form fields:
    Code:
    items: [
                new Ext.form.FieldSet({
                    title: 'System Settings',
                    autoHeight: true,
                    defaultType: 'textfield',
                    items: [{
                            fieldLabel: 'gpsThreshold',
                            name: 'gpsThreshold',
                            width:100
                        }, {
                            fieldLabel: 'vitalsFrequency',
                            name: 'vitalsFrequency',
                            width:100
                        }, {
                            fieldLabel: 'miaTime',
                            name: 'miaTime',
                            width:100
                        }, {
                            fieldLabel: 'unavailabilityTime',
                            name: 'unavailabilityTime',
                            width:100
                        }, {
                            fieldLabel: 'posFrequency',
                            name: 'posFrequency',
                            width:100
                        }
                        , {
                            fieldLabel: 'timezone',
                            name: 'timezone',
                            width:100
                        }
                        , {
                            fieldLabel: 'hbFrequency',
                            name: 'hbFrequency',
                            width:100
                        }
                    ]
                })
    The record seems to populate fine. In firebug DOM explorer the Settings record says:
    Settings:
    Record.success = true
    Record.totalRecords = 1
    Record.0.data.... list is populated with name value pairs of the above

    Next I replaced the XML "load" button with:
    Code:
        // simple button add
        fs.addButton('Load', function(){        
            fs.getForm().loadRecord(Settings);        
        });
    Nothing happens.. any ideas??

  2. #2
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    What is 'fs'? If it maps to the fieldSet in your example, I see some differences between fieldSet and formPanel in the API (I have never used fieldSets), such as there not even being a getForm() method. Are you using a debugging environment that shows you javascript errors?

  3. #3
    Ext User
    Join Date
    Sep 2008
    Posts
    5
    Vote Rating
    0
    metaldeth81 is on a distinguished road

      0  

    Default my bad

    my bad


    fs is mapped to the formPanel:

    Code:
    var Settings = Ext.data.Record.create([
               {name: 'gpsThreshold', mapping:'gpsThreshold'},
               {name: 'vitalsFrequency', mapping:'vitalsFrequency'},
               {name: 'miaTime', mapping:'miaTime'},
               {name: 'unavailabilityTime', mapping:'unavailabilityTime'},
               {name: 'posFrequency', mapping:'posFrequency'},
               {name: 'timezone', mapping:'timezone'},
               {name: 'hbFrequency', mapping:'hbFrequency'}       
           ]);
           var myReader = new Ext.data.JsonReader({
               root: "root"                                    
           }, Settings);
          
           var AjaxRead = 
               Ext.Ajax.request({
               url: '/django/config/settings',
               method: 'GET',
               success: function (response){
                   Settings = myReader.read(response);               
                   }
               }); 
    
    var fs = new Ext.FormPanel({
            frame: true,
            title:'System Settings',
            labelAlign: 'right',
            labelWidth: 100,
            width:250,
            waitMsgTarget: true,
            
            // configure how to read the XML Data
            reader : myReader,
    
            // reusable eror reader class defined at the end of this file
            //errorReader: new Ext.form.XmlErrorReader(),
    
            items: [
                new Ext.form.FieldSet({
                    title: 'System Settings',
                    autoHeight: true,
                    defaultType: 'textfield',
                    items: [{
                            fieldLabel: 'gpsThreshold',
                            name: 'gpsThreshold',
                            width:100,
                            value:'0'
                        }, {
                            fieldLabel: 'vitalsFrequency',
                            name: 'vitalsFrequency',
                            width:100,
                            value:'25'
                        }, {
                            fieldLabel: 'miaTime',
                            name: 'miaTime',
                            width:100,
                            value:'222228'
                        }, {
                            fieldLabel: 'unavailabilityTime',
                            name: 'unavailabilityTime',
                            width:100,
                            value:'120'
                        }, {
                            fieldLabel: 'posFrequency',
                            name: 'posFrequency',
                            width:100,
                            value:'15'
                        }
                        , {
                            fieldLabel: 'timezone',
                            name: 'timezone',
                            width:100,
                            value:'ADFSDFSDFEST'
                        }
                        , {
                            fieldLabel: 'hbFrequency',
                            name: 'hbFrequency',
                            width:100,
                            value:'5'
                        }
                    ]
                })
            ]
        });

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Hey whadayaknow, another person trying to figure out how to get ExtJS forms working

    metaldeth81, is this example working for you?

    If so, would you be so kind as to post the actual working example?

    Thanks!

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Unless the content is delivered in a weird format, do not use a Reader.

    I keep posting this over and over.

    Forms understand JSON

    So you you can just load the form from a URL as described at http://extjs.com/deploy/dev/docs/?cl...rm.Action.Load

    It's dead simple. Return a packet which contains a success property and a data property.

    The data property contains properties named after all the fields.

    There. That's all there is to it, and it works nicely.

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Great call Animal...you da man. Works great as you said.

    I think the problem is that us newbies see a lot of examples out there that DO use readers so naturally we end up using those in our code.

    Thanks for the help,
    Randy

  7. #7
    Ext User
    Join Date
    Sep 2008
    Posts
    24
    Vote Rating
    0
    mcahill81 is on a distinguished road

      0  

    Default new issue... still not populating.. unhandled exception

    new issue... still not populating.. unhandled exception


    OK, I followed Animal's advice and simplified it down... A LOT.. I have 1 field, and a matching field in the response JSON. Getting another error now. Note, I AM using ext-all-debug.js, however it's kicking to: adapter/ext/ext-base.js

    edit-test.js
    Code:
    /*
     * Ext JS Library 2.2
     * Copyright(c) 2006-2008, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    Ext.onReady(function(){
        Ext.QuickTips.init();
    
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';
        
        var fs = new Ext.FormPanel({
            frame: true,
            title:'System Settings',
            labelAlign: 'right',
            labelWidth: 100,
            width:250,
            waitMsgTarget: true,        
            items: [
                new Ext.form.FieldSet({
                    title: 'System Settings',
                    autoHeight: true,
                    defaultType: 'textfield',
                    items: [{
                            fieldLabel: 'gpsThreshold',
                            name: 'gpsThreshold',
                            width:100
                        }
                    ]
                })
            ]
        });
    
        fs.on({
            actioncomplete: function(form, action){
                if(action.type == 'load'){
                    submit.enable();
                }
            }
        });
    
        fs.render('form-ct');
        
        var AjaxRead = 
            Ext.Ajax.request({
            url: 'json.html',
            method: 'GET',
            success: function (response){               
                   fs.getForm().load(response.responseText);               
            }
        });
    });
    json.html
    Code:
    {success:true, data:{gpsThreshold:"0"}}
    Firebug output:
    Code:
    GET http://MYSERVER/mcahillTest/admin/json.html?_dc=1221831609182 104ms
    
    Response Body
    
    {success:true, data:{gpsThreshold:"0"}}
    
    Error (after successful GET but before "success handlers" kick in?):
    uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://MYSERVER/mcahillTest/javascript/lib/ext-2.2/adapter/ext/ext-base.js :: anonymous :: line 10" data: no]

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That looks like a same domain violation.

    But why don't you just use fs.getForm().load() ?

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    fs.getForm().load loads the form. read the docs, and follow the links.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Just a remark about the code from the original post:

    You are trying to loadRecord a Record CLASS instead of an instance.