Results 1 to 4 of 4

Thread: this.monitor is null double click selecting a table row

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default this.monitor is null double click selecting a table row

    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:

    Code:
    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?

  2. #2
    Sencha Premium User
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    716
    Answers
    45

    Default

    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

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    Hi, thanks for the answer. this is my version. I'm using sencha architect.

    Code:
    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.



    Code:
    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);
    
        }
    
    });

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2012
    Posts
    44
    Answers
    3

    Default

    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?

Similar Threads

  1. Replies: 5
    Last Post: 2 Jun 2015, 5:49 AM
  2. double click not working for selecting items in a drag and drop
    By r6174 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Jul 2013, 8:26 AM
  3. Replies: 1
    Last Post: 23 May 2012, 12:04 AM
  4. Double single click and double click in editor grid problem
    By Zanisimo in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 22 Jan 2011, 12:05 PM
  5. Render a panel to a large table cell... monitor resize of table cell
    By mjaomaha in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 14 Apr 2010, 7:43 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •