I'm stuck with populating Ext.form.Panel with data in my MVC project. In Controller I want to load data from store into form. But I cannot access basic form via form panel.

Form view

Ext.define('Example.view.webitem.Form', {
    extend: 'Ext.form.Panel', 
    alias: 'widget.webitemform',
    renderTo: 'webstructure-form',

    items: [{
        xtype: 'fieldset',
        title: 'Metadata',
        items: [{
            xtype: 'displayfield',
            name: 'id',
            fieldLabel: 'ID'
        },
        {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name'
        }]
    }],
    buttons: [{
        text: 'Load',
        action: 'loaditem'
    }]
});

Controller

Ext.define('Example.controller.WebItemsForm', {
    extend: 'Ext.app.Controller',

    stores: ['WebItemsForm'],
    models: ['WebItem'],
    views: ['webitem.Form'],
    init: function() {
        // This does not work. Data aren't loaded in store
        this.control({
            'webitemform': {
               render: this.loadItem
            }
        });
        // This works, but isn't userfriendly
        this.control({
            'webitemform button[action=loaditem]': {
                click: this.loadItem
            }
        });
    },    
    loadItem: function() {
        var form = this.getWebItemForm().getForm();
        var data = this.getStore('WebItemsForm').getAt(0);
        form.loadRecord(data);
    }
});

After clicking on Load button, data are correctly loaded into form. But when I'm trying to catch Ext.form.Panel render event, store doesn't have data loaded.

Uncaught TypeError: Cannot read property 'data' of undefined. 

If I understand correctly, this is caused because load operation is asynchronous? How to load data on render event? Is there more suitable event?

I'm stuck with populating Ext.form.Panel with data in my MVC project. In Controller I want to load data from store into form. But I cannot access basic form via form panel.

Form view

Ext.define('Example.view.webitem.Form', {
    extend: 'Ext.form.Panel', 
    alias: 'widget.webitemform',
    renderTo: 'webstructure-form',

    items: [{
        xtype: 'fieldset',
        title: 'Metadata',
        items: [{
            xtype: 'displayfield',
            name: 'id',
            fieldLabel: 'ID'
        },
        {
            xtype: 'textfield',
            name: 'name',
            fieldLabel: 'Name'
        }]
    }],
    buttons: [{
        text: 'Load',
        action: 'loaditem'
    }]
});

Controller

Ext.define('Example.controller.WebItemsForm', {
    extend: 'Ext.app.Controller',

    stores: ['WebItemsForm'],
    models: ['WebItem'],
    views: ['webitem.Form'],
    init: function() {
        // This does not work. Data aren't loaded in store
        this.control({
            'webitemform': {
               render: this.loadItem
            }
        });
        // This works, but isn't userfriendly
        this.control({
            'webitemform button[action=loaditem]': {
                click: this.loadItem
            }
        });
    },    
    loadItem: function() {
        var form = this.getWebItemForm().getForm();
        var data = this.getStore('WebItemsForm').getAt(0);
        form.loadRecord(data);
    }
});

After clicking on Load button, data are correctly loaded into form. But when I'm trying to catch Ext.form.Panel render event, store doesn't have data loaded.

Uncaught TypeError: Cannot read property 'data' of undefined. 

If I understand correctly, this is caused because load operation is asynchronous? How to load data on render event? Is there more suitable event?

• javascript
• json
• forms
• model-view-controller
• extjs

1 Answer 1

Afer the panel is rendered (afterrender event) check if store is is loaded yet (usally it will not be, unless panel's render has been deferred because it's in an inactive tab for example). If the test fails in the same event add load listener to the store, that will push data back to panel once it's ready.