0

我正在尝试遵循 extjs关于在 click 上添加表单的教程。

现在的“扭曲”是我直接希望创建一个更有条理的方法。所以我用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类中。控制台记录了条目，所以我知道该函数已执行。但是没有显示任何形式。- 这里的正确方法是什么？

4

1 回答 1

1

Yes, as you said, no form is shown, because a newly created form is not shown by default.

Two solutions:

  • You can add to the form autoShow: true OR
  • You can add execute the show function on the created form: Ext.create(...).show()

However, I would recommend that you reuse the form, so instantiate a new one only once, store it on your grid, and reuse it for subsequent calls:

itemtap: function(view, index, target, record) {
    if(!this.myForm) this.myForm = Ext.create("Ext.form.Panel", {});
    this.myForm.loadRecord(record);
    this.myForm.show();
}

For this to work, you may have to set closeAction: 'hide' on the form.

In at least some versions of ExtJS 6, it seemed to me as if IE exhibited memory leaks on component instantiation, so one should create as few new components as possible.

于 2017-12-05T14:53:21.143 回答