CODEWITHSUNDEEP
javascriptextjsextjs6-modern
paul23
paul23

Reputation: 9435

Sencha ext.js, create form on the fly

I'm trying to follow the tutorial of extjs about adding a form on click.

Now the "twist" is that I directly wish to create a more structured approach. So I'm using Ext.define to create both a grid and a form, for the grid.

The grid:

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

the form:

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

The problematic code is under the listeners: ... in the MyApp.view.main.EmployeeGrid class. The console is entry is logged, so I know the function is executed. However no form is shown. - What is the correct approach here?

Upvotes: 0

Views: 465

Answers (1)

Alexander
Alexander

Reputation: 20224

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.

Upvotes: 1

Related Questions