Form loadRecord() not populating fields

[metaldeth81]

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

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:

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:

    // simple button add
    fs.addButton('Load', function(){        
        fs.getForm().loadRecord(Settings);        
    });

Nothing happens.. any ideas??

[devnull]

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?

[metaldeth81]

fs is mapped to the formPanel:

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'
                    }
                ]
            })
        ]
    });

[Bucs]

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!

[Animal]

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.

[Bucs]

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

[mcahill81]

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

/*
 * 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

{success:true, data:{gpsThreshold:"0"}}

Firebug output:

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]

[Animal]

That looks like a same domain violation.

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

[Animal]

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

[Condor]

Just a remark about the code from the original post:

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