Sencha ext.js, create form on the fly

Question

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?

score 1 · Answer 1 · answered Dec 05 '17 at 14:53

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.

answered Dec 05 '17 at 14:53

Alexander

19,906
19
75
162

Thanks for the reply, I noticed I made a mistake with the create, it should of course be `"MyApp.view.main.FormPanel"` (updated my original post). - however when I try to use your "good" solution, it gives the error: `Uncaught TypeError: this.myForm.loadRecord is not a function` – paul23 Dec 05 '17 at 15:24
@paul23 I overlooked that you are running on modern. Seems they call it [`setRecord`](http://docs.sencha.com/extjs/6.2.1/modern/Ext.form.Panel.html#method-setRecord) there. From my experience I can say, the classic vs. modern problem will haunt you throughout the whole development process. – Alexander Dec 05 '17 at 16:03

Sencha ext.js, create form on the fly

1 Answers1