Question

我坚持用Ext.form.Panel填充我的MVC项目中的数据。在Controller中我想将数据从商店加载到表单中。但是我无法通过表单面板访问基本表单。

表单视图

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.

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

Answer 1

对面板进行渲染（afterrender事件）检查商店是否已加载（通常不会，除非面板的渲染已延迟，因为它在非活动标签中）。如果测试在同一事件中失败，则将load侦听器添加到商店，这将在数据准备就绪后将数据推送回面板。

ExtJS 4在创建时将数据加载到表单面板中。要抓住哪个事件？

1 个答案: