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

Share Improve this question Follow edited Aug 9, 2011 at 21:22 kurochenko asked Aug 9, 2011 at 14:41 kurochenkokurochenko 1,25433 gold badges1919 silver badges4444 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.