Specifying a root node of FormPanel.form.load for dynamic forms

Question

I'm building a dynamic ExtJS form based on JSON data loaded from an ASP.NET web service. The problem I find is that ExtJS expects the JSON in a specific format, ie.

{ "metaData": { "title": "Testing" }, "data": [], "success": true }

When using an ASP.NET web service to return an object as JSON it returns with the first element "d", ie.

{ "d": { "metaData": { "title": "Testing" }, "data": [], "success": true } }

Is it possible to tell the ExtJS form to use "d" as the root node?

Answer 1

After some more testing I've found that the ExtJS form does load the JSON from my web service but because the response text doesn't have "success": true in the root it is handled by the 'failed' handler. Fortunately this handler accepts the same parameters as the 'success' handler so can be manipulated the same.

Here's an example of my form load handler:

this.form.load({
  url: "myservice.asmx/getUser",
  headers: {'Content-Type': 'application/json'},
  success: function(form, action) {
    //not fired
  },
  failure: function(form, action){
    if (action.result.d){
      //process data
    }
  }
});

Answer 2

Cl4NCY thanks... hola me ha ayudado bastante este pequeño script para lo de success en el this.form.load... gracias... saludos.

Answer 3

You don't have to call form.load() of course. I bypass it, and simply call my ASMX web method directly by calling the AJAX function that links to my webmethod, as provided by the ScriptManager. MS AJAX does all the JSON decoding, and factors out the 'd' property, etc.

Your web method doesn't even have to return an object with the 'success' and 'data' objects, as required by form.load(), although it's a useful format and I stick to it.

With the 'data' object returned by the web method (with name/value pairs, where name == field name) you can now call ExtJs's form.setValues(data); to write the values into the fields.

This is a perfectly valid case for bypassing ExtJS's code.

--

As with loading, so with submitting. To get around the 'd' property problem in the object that has to be returned by the submission web method, handle the click event of the Submit button, and push the data to the server by directly calling your web method. Your web method can/should return an object in the same format as is required by ExtJs. But you get back this object, and if not successful, call form.markInvalid() yourself, passing in the 'errors' property. Peasy easy and works well.

Again, since ExtJs doesn't play nice with the 'd' property it's perfectly valid to bypass it and do things yourself.

--

I tend to use the ScriptManager-provided functions for calling my web methods more and more, and bypass ExtJs's AJAX method invoking code. The former are much simpler to use, know about the 'd' property and also know how to deserialize Microsoft's JSON format for serialized DateTime objects.