javascript ExtJS 4 在创建时将数据加载到表单面板中。要捕捉哪个事件?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6997996/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 22:38:30  来源:igfitidea点击:

ExtJS 4 Loading data into form panel on creation. Which event to catch?

javascriptjsonformsmodel-view-controllerextjs

提问by kurochenko

I'm stuck with populating Ext.form.Panelwith 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.

我坚持Ext.form.Panel在我的 MVC 项目中填充数据。在控制器中,我想将存储中的数据加载到表单中。但我无法通过表单面板访问基本表单。

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 Loadbutton, data are correctly loaded into form. But when I'm trying to catch Ext.form.Panel renderevent, store doesn't have data loaded.

单击Load按钮后,数据将正确加载到表单中。但是当我试图捕捉Ext.form.Panel render事件时,商店没有加载数据。

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?

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

采纳答案by Mchl

Afer the panel is rendered (afterrenderevent) 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 loadlistener to the store, that will push data back to panel once it's ready.

渲染面板后(afterrender事件)检查商店是否已加载(通常不会加载,除非面板的渲染已被推迟,例如因为它位于非活动选项卡中)。如果测试在同一个事件中失败,将load侦听器添加到商店,一旦准备好,它将把数据推回面板。