EXTJS Mouse click not working after load a page for multi time

Question

I have a grid on my panel, named gridView, and gridView is in panel named panelMain, by dbclick listener on grid row, I load a from by doing something like this:

listeners:{
itemdblclick: function(dataview, index, item, e) {

    /* I did not create new studentForm every time.*/
    var editStudent = Ext.getCmp('editStudent');
    if(editStudent == undefined)
        editStudent = Ext.create('H.view.EditStudent');


    editStudent.getForm().load({
        url: 'studentDetails.php',
        params: {studentId: studentId},
        method:'GET',
        success: function (form, action) {

            var panelMain = Ext.getCmp('panelMain');
            panelMain.items.clear();

            panelMain.add(editStudent);
            panelMain.update();
            panelMain.doLayout();
        },
        failure: function (form, action) {
            /// do nothing
        }
    });
}

After I edited the student I should come back to grid page, so I do something like this:

var panelMain = Ext.getCmp('panelMain');
var gridView = Ext.getCmp('gridView');

panelMain.items.clear();

panelMain.add(gridView);
panelMain.update();
panelMain.doLayout();

The problem is when I come back to the grid, it does not fire any itemdbclick event any more (it's like the grid is just an image in page, no event fires).

And sometimes when I go to edit studentForm and come back grid work, but when I go to student form again, the student page does not fire any event, when I click edit button, I do not get any answer, I cant see even on mouse hover (that causes changes on button color).

What is the problem here?

I use Extjs 4 and Extjs MVC.
I have one Controller for grid and edit student page.

score 1 · Answer 1 · edited Jan 07 '14 at 13:52

I think your misunderstand the success config on form. Try:

listeners:{
itemdblclick: function ( gridView, record, item, index, e, eOpts ) {

    var editStudent = Ext.getCmp('editStudent');
    if(editStudent == undefined)
        editStudent = Ext.create('H.view.EditStudent');

    /* Load record in the form.
       Form must have on formfields property: 'name' equals to 'dataIndex' */

    editStudent.getForm().loadRecord(record); 

    var panelMain = Ext.getCmp('panelMain');
    panelMain.items.clear();

    panelMain.add(editStudent);
}

success and failure are the callbacks functions for the submit function.

score 0 · Answer 2 · answered Aug 10 '12 at 22:48

a) You are not using MVC pattern here. With what Sencha calls MVC, you would have all this code in a Controller instead of event listener.
b) I strongly suspect that this code causes deadlocks somewhere, with events firing so rapidly in succession that browser just freezes. You need to use debugger to see what exactly happens.

EXTJS Mouse click not working after load a page for multi time

2 Answers2