PDA

View Full Version : this.monitor is null double click selecting a table row



2 Jul 2015, 12:16 AM
Hello,

I don't know if this is a bug or just a mistake while coding, but i'm quite sure that is a extjs bug. this is what happen:
if i double click on a row of a table i get this error:



TypeError: this.monitor is null






return this.monitor.getItems();





this error refers to line 370 col 8 of Basic.js.
This happens with every table row.

I've never noticed this problem before because i've never thought to perform a double click.

I have no idea how to solve this problema, but since i don't need to capture a double click on my tables, how could i intercept it and just don't do anything? I mean, hoping that this may patch the problem...

Any ideas?

suzuki1100nz
2 Jul 2015, 12:22 AM
Hi - what version of ExtJS and can your reproduce it in a fiddle?

https://fiddle.sencha.com/#home

Also you will need to post your code.

Given the monitor instance is created in the Basic.js constructor it should never be null during normal operation.
However it is set to null in the destructor or destroy function so smells to me like something has been destroyed

2 Jul 2015, 12:35 AM
Hi, thanks for the answer. this is my version. I'm using sencha architect.


Sencha Architect version: 3.0.4.1386
channel: 3.0.1-stable
platform: 1.3.0.803
cmd: 4.0.4.84
framework: Ext JS 4.2.x



I've never used sencha fiddle. I'll try to figure out how it works...

Btw, this is my code. In few lines: this code creates two panels, on left side i've a table, well, a list of usernames, while on the right side it displays infos about users.
The infos on the right side are updated as soon as it clicks on a line on left side.
But if you do a double click... error.
I mean, i tried this in other tables of my app (tables made in a different way for other purpose) and i got the same error. :-?





Ext.define('MyApp.view.ManageUsers', {
extend: 'Ext.form.Panel',
alias: 'widget.manageusers1',

requires: [
'Ext.form.FieldSet',
'Ext.grid.Panel',
'Ext.grid.View',
'Ext.grid.column.Column',
'Ext.selection.RowModel',
'Ext.form.Panel'
],

height: 555,
width: 782,
bodyPadding: 10,
frameHeader: false,
header: false,
title: 'My Form',

layout: {
type: 'hbox',
align: 'stretch'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'fieldset',
flex: 1,
layout: 'fit',
title: 'Usernames',
items: [
{
xtype: 'gridpanel',
frameHeader: false,
header: false,
title: 'My Grid Panel',
hideHeaders: true,
store: 'UserStore',
viewConfig: {
disableSelection: false
},
columns: [
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'id',
text: 'Id'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'enabled',
text: 'Enabled'
},
{
xtype: 'gridcolumn',
dataIndex: 'username',
text: 'Username',
flex: 1
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'email',
text: 'Email'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'surname',
text: 'Surname'
},
{
xtype: 'gridcolumn',
hidden: true,
dataIndex: 'typeOfUser',
text: 'TypeOfUser'
}
],
selModel: Ext.create('Ext.selection.RowModel', {
mode: 'SINGLE',
enableKeyNav: false,
ignoreRightMouseSelection: true,
listeners: {
select: {
fn: me.onRowModelSelect,
scope: me
}
}
})
}
]
},
{
xtype: 'fieldset',
flex: 3,
layout: 'fit',
title: 'Description',
items: [
{
xtype: 'form',
itemId: 'manageUsersLoader',
layout: 'fit',
bodyPadding: 10,
frameHeader: false,
header: false,
title: 'My Form'
}
]
}
]
});

me.callParent(arguments);
},

onRowModelSelect: function(rowmodel, record, index, eOpts) {




var container = Ext.ComponentQuery.query('#manageUsersLoader')[0];
container.removeAll();


var form = Ext.create('MyApp.view.UserDescription');
form.title = "User " + record.data.id + ": " + record.data.name;
form.reload(record.data);


container.add(form);

}

});

2 Jul 2015, 4:50 AM
Ok. here's the problem. Actually it has nothing to do with tables.

Indeed, as suzuki1100nz said, it has to do with a "destroied" object.
indeed, here's the situation.

suppose you have to create a dynamic interface depending on some ajax request sent to the server.
If you renew the request of dynamic interface creation whenever you click on a table row, then you may be in the following situation.

you click -> you delete all the previous objects -> you create a basic object (o1) -> perform a ajax request (a1) -> you click -> you delete all the previous objects -> you create a basic object -> ajax request (a1) answer -> (a1) start to create the dynamic interface by adding elements to object (o1).
crash.


remind that (a1) is an ajax call made inside the object while loading the object itself. Hence it belongs to the object but it is not deallocated.



the problem lays on the fact that the ajax request created by the first call is not destroied while destroing the object that performed it.
so, the ajax request (a1) go on living, while the object (o1) is deallocated.
hence the mismatch and the crash.


I know that it may be designed in a different way, but I don't think this is a strange situation, isn't it?