Results 1 to 4 of 4

Thread: "Cannot read property 'parentNode' of null" when expanding/collapsing

  1. #1
    Sencha User
    Join Date
    Sep 2018
    Posts
    2

    Default "Cannot read property 'parentNode' of null" when expanding/collapsing

    Hi,

    I'm encountering a difficult to characterize issue that seems to be the result of a race condition exacerbated by quickly expanding/collapsing.
    I get the error "Cannot read property 'parentNode' of null" after quickly expanding/collapsing the row widget, please see code snippet below.

    Callstack:
    Code:
    getItemLayoutEl    @    Layout.js?_dc=20181016152843:432
    isValidParent    @    Layout.js?_dc=20181016152843:408
    renderItems    @    Layout.js?_dc=20181016152843:391
    renderChildren    @    Container.js?_dc=20181016152843:476
    invalidate    @    Context.js?_dc=20181016152843:736
    invalidate    @    Context.js?_dc=20181016152843:730
    invalidate    @    Context.js?_dc=20181016152843:745
    invalidate    @    Context.js?_dc=20181016152843:745
    invalidate    @    Context.js?_dc=20181016152843:745
    flushInvalidates    @    Context.js?_dc=20181016152843:526
    run    @    Context.js?_dc=20181016152843:1124
    flushLayouts    @    Component.js?_dc=20181016152843:229
    resumeLayouts    @    Component.js?_dc=20181016152843:245
    Ext.resumeLayouts    @    Component.js?_dc=20181016152843:6776
    toggleRow    @    RowWidget.js?_dc=20181016152843:429
    expand    @    RowExpander.js?_dc=20181016152843:41
    trdpStepsTreePanelBeforeSelectHandler    @    TestResultDetailsPan…20181016152843:1001
    fire    @    Event.js?_dc=20181016152843:483
    doFireEvent    @    Observable.js?_dc=20181016152843:816
    doFireEvent    @    Component.js?_dc=20181016152843:3177
    prototype.doFireEvent    @    EventDomain.js?_dc=20181016152843:295
    fireEventArgs    @    Observable.js?_dc=20181016152843:655
    (anonymous)    @    Observable.js?_dc=20181016152843:1583
    fire    @    Event.js?_dc=20181016152843:483
    doFireEvent    @    Observable.js?_dc=20181016152843:816
    doFireEvent    @    Component.js?_dc=20181016152843:3177
    prototype.doFireEvent    @    EventDomain.js?_dc=20181016152843:295
    fireEventArgs    @    Observable.js?_dc=20181016152843:655
    (anonymous)    @    Observable.js?_dc=20181016152843:1583
    fire    @    Event.js?_dc=20181016152843:483
    doFireEvent    @    Observable.js?_dc=20181016152843:816
    fireEventArgs    @    Observable.js?_dc=20181016152843:655
    fireEvent    @    Observable.js?_dc=20181016152843:608
    onSelectChange    @    RowModel.js?_dc=20181016152843:122
    doSingleSelect    @    Model.js?_dc=20181016152843:831
    doSelect    @    Model.js?_dc=20181016152843:625
    selectWithEventSingle    @    Model.js?_dc=20181016152843:1349
    selectWithEvent    @    Model.js?_dc=20181016152843:298
    onNavigate    @    Model.js?_dc=20181016152843:446
    fire    @    Event.js?_dc=20181016152843:483
    doFireEvent    @    Observable.js?_dc=20181016152843:816
    fireEventArgs    @    Observable.js?_dc=20181016152843:655
    fireEvent    @    Observable.js?_dc=20181016152843:608
    fireNavigateEvent    @    NavigationModel.js?_…20181016152843:1055
    onCellClick    @    NavigationModel.js?_…=20181016152843:316
    callParent    @    Base.js?_dc=20181016152843:1387
    onCellClick    @    NavigationModel.js?_dc=20181016152843:51
    fire    @    Event.js?_dc=20181016152843:483
    doFireEvent    @    Observable.js?_dc=20181016152843:816
    doFireEvent    @    Component.js?_dc=20181016152843:3177
    prototype.doFireEvent    @    EventDomain.js?_dc=20181016152843:295
    fireEventArgs    @    Observable.js?_dc=20181016152843:655
    fireEvent    @    Observable.js?_dc=20181016152843:608
    processItemEvent    @    Table.js?_dc=20181016152843:3018
    processUIEvent    @    View.js?_dc=20181016152843:598
    callParent    @    Base.js?_dc=20181016152843:1387
    processUIEvent    @    View.js?_dc=20181016152843:193
    handleEvent    @    View.js?_dc=20181016152843:542
    callOverrideParent    @    Ext.js?_dc=20181016152843:55
    callParent    @    Base.js?_dc=20181016152843:1387
    handleEvent    @    RowWidget.js?_dc=20181016152843:195
    fire    @    Event.js?_dc=20181016152843:483
    fire    @    Dom.js?_dc=20181016152843:459
    publish    @    Dom.js?_dc=20181016152843:413
    publishDelegatedDomEvent    @    Dom.js?_dc=20181016152843:437
    doDelegatedEvent    @    Dom.js?_dc=20181016152843:490
    onDelegatedEvent    @    Dom.js?_dc=20181016152843:471
    View:
    Code:
                    xtype: 'treepanel',
                    reference: 'stepsTreePanel',
                    allowDeselect: true,
                    animate: false,
                    bind: {
                        emptyText: '<div class="tm-empty-text">{rtpEmptyTextValue}</div>'
                    },
                    flex: 1,
                    listeners: {
                        beforedeselect: 'trdpStepsTreePanelBeforeDeselectHandler',
                        beforeitemexpand: 'trdpBeforeItemExpandHandler',
                        beforeselect: 'trdpStepsTreePanelBeforeSelectHandler',
                        filterchange: 'trdpFilterChangeHandler',
                        select: 'trdpStepsTreePanelSelectHandler'
                    },
                    plugins: [{
                        ptype: 'SkylineFilterPlugin',
                        filterTextField: 'stepsTreePanelFilterTextfield'
                    }, {
                        ptype: 'SkylineRowWidget',
                        pluginId: 'stepsTreeRowWidgetPlugin',
                        expandOnDblClick: false,
                        headerWidth: 0,
                        widget: {
                            xtype: 'panel',
                            bind: {
                                html: '{stepDataPanelHtml}'
                            },
                            bodyCls: 'tm-step-details-panel-body',
                            items: [{
                                xtype: 'fieldset',
                                bind: {
                                    data: '{record}',
                                    hidden: '{stepDataFieldSetHidden}'
                                },
                                defaults: {
                                    xtype: 'fieldset',
                                    cls: 'tm-step-details-fieldset',
                                    collapsible: true,
                                    flex: 1,
                                    layout: 'fit'
                                },
                                layout: {
                                    type: 'vbox',
                                    align: 'stretch'
                                },
    Before select handler:
    Code:
        trdpStepsTreePanelBeforeSelectHandler: function (selectionModel, record, index, eOpts) {
            this.selectedNodeId = record.getId();
    
            if (index === -1) {
                return;
            }
    
            var tree = this.lookup('stepsTreePanel');
            tree.getPlugin('stepsTreeRowWidgetPlugin').expand(index);
        },
    Expand:
    Code:
        expand: function (rowIndex) {
            if (this.isCollapsed(rowIndex)) {
                this.toggleRow(rowIndex, this.getCmp().getStore().getAt(rowIndex));
            }
        },
    I inherited pretty much all of this code, so I will do my best to answer any questions that you have.
    Any ideas as to what could be happening would be appreciated, though!

    Thank you for your time!

  2. #2

    Default

    Did you ever find a solution for this? I have spent quite a bit of time trying to track down a solution to the problem myself. My use case is slightly different but the same cause.

  3. #3
    Sencha User
    Join Date
    Sep 2018
    Posts
    2

    Default

    Nope. I filed a ticket with Sencha - they marked it as duplicate and pointed me to another ticket from a year or two ago. They are aware of the issue but no word on whether or not a fix is on the road map.
    Since the issue is intermittent for us (albeit very annoying), we've decided to deprioritize it for now with the hope that it is fixed soon. If not, I will be rewriting the view completely.

  4. #4
    Sencha User
    Join Date
    Nov 2014
    Posts
    11

    Default

    I get this once in a while and it is definitely not reproducible on demand. I am handling exception to get around it.

Similar Threads

  1. TypeError: Cannot read property 'parentNode' of null
    By kaddah in forum Sencha Touch 2.x: Q&A
    Replies: 2
    Last Post: 5 Jan 2015, 12:04 AM
  2. Replies: 0
    Last Post: 4 Feb 2013, 2:18 AM
  3. Replies: 2
    Last Post: 6 Nov 2012, 9:03 AM
  4. [NOREPRO] addListItem : "Cannot read property 'parentNode' of null" when refreshing List store
    By subimage in forum Sencha Touch 2.x: Bugs
    Replies: 4
    Last Post: 13 Sep 2012, 7:59 PM

Posting Permissions

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