Load form with Json - how to change root parameter?

[skrtl]

Hello everyone,

I want to load a form with json-data. Instead of

{     success: true,     data: {         title: "Title",         name: "Name"     } }

the json-data have the structure

{     success: true,     result: {         title: "Title",         name: "Name"      } }

So I need to change the root parameter from "data"(default) to "result". I tell the reader in the formPanel to do that, but it doesn't work. I can not load the json data into the form. It seems so, that the reader isn't used?! Is it at the wrong place?

Here is my code:

Form:

Ext.define('content.StaticPages', {
    extend: 'Ext.form.Panel',
    alias: 'widget.staticpages',
    
    initComponent: function() {
        Ext.apply(this, {
            id: 'staticPageForm',
            frame:false,
            title: 'Static Page',
            bodyStyle:'padding:5px 5px 0',
            fieldDefaults: {
                msgTarget: 'side',
                labelWidth: 75
            },
            defaultType: 'textfield',
            defaults: {
                anchor: '95%'
            },
            reader : Ext.create('Ext.data.reader.Json', {
                root : 'result',
                successProperty: 'success'
            }),
            items: [{
                fieldLabel: 'Title',
                name: 'title',
                allowBlank:false
            },{
                fieldLabel: 'Name',
                name: 'name',
                allowBlank:false
            }],

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });

        this.callParent(arguments);
    }
});

Controller:

Ext.define('controller.ContentPages', {
    extend: 'Ext.app.Controller',
    
    views: [
        'content.StaticPages',
    ],
    
    init: function() {    
        this.control({
            'panel[id=overviewtree]': {
                itemclick: function(view, record, item, index, e, options) {
                    if (record.hasChildNodes() == false) {

                        var panel = Ext.ComponentMgr.get('overviewcenter');
                        panel.getLayout().setActiveItem(1);

                        form = Ext.ComponentMgr.get('staticPageForm');
                        form.load({
                            url: '/api/query/json/content_page.getpage',
                            params: {
                                id: 1
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert("Load failed", action.result.message);
                            },
                            waitMsg: 'Loading...'
                        }
                    }                    
                }
            }            
        });
    }
});

Thanks for help!

stefan

[tobiu]

hi stefan,

the formPanel itself has no reader-config, its related to the underlying Ext.form.Basic

Note: If subclassing FormPanel, any configuration options for the BasicForm must be applied to the initialConfig property of the FormPanel. Applying BasicForm configuration settings to this will not affect the BasicForm's configuration.

so:

initialConfig : {
    reader : ...
}

should solve your issue.

[skrtl]

Hi Tobias,

thank you for your answer! When I use the initialConfig property and also a model it works!

initialConfig : {
	        	reader : Ext.create('Ext.data.reader.Json', {
	                model: 'content.StaticPage',
	                root : 'result'
	            }),
	        },

Grüße nach München!