Question

我正在尝试按照extjs about adding a form on click的教程。

现在＆＃34;扭曲＆＃34;是我直接希望创建一个更结构化的方法。所以我使用Ext.define为网格创建网格和表单。

网格：

Ext.define('MyApp.view.main.EmployeeGrid', {
    extend: 'Ext.grid.Grid',
    xtype: 'employee-grid',

    title: 'Employee Directory',
    iconCls: 'x-fa fa-users',
    listeners: {
        itemtap: function() {
            console.log("test");
            Ext.create("MyApp.view.main.FormPanel", {});
        }
    },
    store: {
        data: [{
            "firstName": "Jean",
            "lastName": "Grey",
            "phoneNumber": "(372) 792-6728"
        }]
    },

    columns: [{
        text: 'First Name',
        dataIndex: 'firstName',
        flex: 1
    }, {
        text: 'Last Name',
        dataIndex: 'lastName',
        flex: 1
    }, {
        text: 'Phone Number',
        dataIndex: 'phoneNumber',
        flex: 1
    }]
});

形式：

Ext.define("MyApp.view.main.FormPanel", {
    extend: "Ext.form.Panel",
    xtype: 'form-panel',
    title: 'Update Record',
    floating: true,
    centered: true,
    width: 300,
    modal: true,
    items: [{
        xtype: 'textfield',
        name: 'firstname',
        label: 'First Name'
    }, {
        xtype: 'toolbar',
        docked: 'bottom',
        items: ['->', {
            xtype: 'button',
            text: 'Submit',
            iconCls: 'x-fa fa-check',
            handler: function() {
                this.up('formpanel').destroy();
            }
        }, {
            xtype: 'button',
            text: 'Cancel',
            iconCls: 'x-fa fa-close',
            handler: function() {
                this.up('formpanel').destroy();
            }
        }]
    }]
});

有问题的代码位于listeners: ...类的MyApp.view.main.EmployeeGrid下。控制台是条目记录，所以我知道该函数已执行。但是没有显示任何表格。 - 这里的正确方法是什么？

Answer 1

是的，正如您所说，没有显示任何表单，因为默认情况下不会显示新创建的表单。

两种解决方案：

您可以添加到表单autoShow: true或
您可以在创建的表单上添加执行show功能：Android.Views.WindowManagerBadTokenException: Unable to add window -- token null is not for an application

但是，我建议您重复使用表单，因此只需实例化一次新表单，将其存储在网格中，然后将其重新用于后续调用：

Ext.create(...).show()

为此，您可能需要在表单上设置closeAction: 'hide'。

至少在某些版本的ExtJS 6中，我觉得好像IE在组件实例化时出现内存泄漏，所以应该创建尽可能少的新组件。

Sencha ext.js，即时创建表单

1 个答案: