Javascript extjs4在创建时将数据加载到表单面板中。去看哪一场比赛？

我一直在用MVC项目中的数据填充

Ext.form.Panel

。在控制器中，我想将数据从存储加载到表单中。但我无法通过表单面板访问基本表单

窗体视图

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

控制器

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

点击

Load

按钮后，数据被正确加载到表单中。但当我试图捕获

Ext.form.Panel render

事件时，存储区没有加载数据

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

---

如果我理解正确，这是因为加载操作是异步的吗如何在渲染事件上加载数据？是否有更合适的事件？

在面板渲染后（

afterrender

事件）检查存储是否已加载（通常不会加载，除非面板的渲染已延迟，因为它位于非活动选项卡中）。如果测试在同一事件中失败，请将

加载

侦听器添加到存储，一旦数据准备就绪，就会将数据推回到面板。

面板渲染后（

afterrender

事件）检查存储是否已加载（通常不会加载，除非面板的渲染已延迟，因为它位于非活动选项卡中）。如果测试在同一事件中失败，请将

加载

侦听器添加到存储，一旦数据准备就绪，就会将数据推回到面板。

谢谢您的回答。存储的侦听器的

load

（而不是

afterload

）事件成功了。对，它是

load

。我永远不会明白为什么他们在加载前有

，

，而在加载后没有

。谢谢你的回答。存储的侦听器的
load
（而不是
afterload
）事件成功了。对，它是
load
。我永远不会理解为什么他们在加载前有
，
，而在加载后没有
。