ExtJS 5 Uncaught TypeError: cannot read property 'parentNode' of null in Tab Panel

Question

I am using ExtJS version 5.1.0.

Problem: I have a Ext.panel.Panel in my view. In this panel's beforeRender, I am trying to add an xtype:'form' whose items contain a tabpanel with multiple tabs.

When I switch the tab after some seconds of waiting on other tab, I get this exception

Uncaught TypeError: cannot read property 'parentNode' of null

And as a result of this, entire view of the switched tab is lost(its blank).

I have been trying this for a time now, but unable to find a solution.

Any suggestions on this would be a great help.

Here is my code snippet:

Ext.define({
    'myClass',
    extend: 'Ext.panel.Panel',
    layout: 'fit',
    viewModel: {
        type: 'abc'
    },
    beforeRender: function() {
        var me = this;
        me.add({
            xtype: 'form',
            trackResetOnLoad: 'true',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                me.getContainer()
            ]
        });
    },

    getContainer: function() {
        var me = this;
        var tabpanel = Ext.create({
            'Ext.TabPanel',
            allowDestroy: false,
            reference: 'abc', //being used in application somewhere
            layout: 'fit',
            border: 0,
            activeTab: 0,
            items: [{
                    xtype: 'container',
                    bind: {
                        data: {
                            abcd
                        }
                    },
                    title: 'tab1',
                    layout: 'fit',
                    items: [
                        me.createContainer1() // contains form fields  
                    ]

                },
                {
                    xtype: 'container',
                    title: 'tab2',
                    layout: 'fit',
                    bind: {
                        data: {
                            abcf
                        }
                    },
                    items: [
                        me.createContainer2() // contains form fields  
                    ]
                }

            ]

        });
    }
});

This is not a duplicate, it is a issue related to tabpanel and not simple HTML. It uses framework related knowledge. If anyone has idea about this, then please explain.

Possible duplicate of [Getting "Cannot read property 'nodeType' of null" when calling ko.applyBindings](https://stackoverflow.com/questions/9128015/getting-cannot-read-property-nodetype-of-null-when-calling-ko-applybindings) — , Apr 08 '18 at 14:33
[How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) The answer, *"A lot. An absurd amount. More than you think you are capable of. After you have reached the end of your rope and the pain of not having the answer exceeds the vast amount of shame received by posting your question, that's when you can go ahead and ask. Because at that point, you will have done whatever research necessary to make it a good question worth asking!"* — , Apr 08 '18 at 14:34
Put together a test case. That code won't run and has syntax errors in it. — Evan Trimboli, Apr 08 '18 at 22:49

score 0 · Answer 1 · answered Apr 09 '18 at 09:56

Firstly you need to use beforerender event instead of beforeRender and beforerender will be inside of listeners.

And also you can return directly xtype instead of creating like below example

createField: function() {
     return [{
         xtype: 'textfield',

         emptyText: 'Enter the value',

         fieldLabel: 'Test'
     }];//You here return Object or Array of items
 }

In this FIDDLE, I have created a demo using your code and make some modification. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        //Define the viewmodel
        Ext.define('ABC', {
            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.abc',

            data: {
                tab1: 'Tab 1',
                tab2: 'Tab 2',
                tab3: 'Tab 3',
                tab4: 'Tab 4',
                title: 'Basic Example'
            }
        });

        //Define the panel
        Ext.define('MyPanel', {

            extend: 'Ext.panel.Panel',

            xtype: 'mypanel',

            layout: 'fit',

            //This function will return field items for container or panel
            createContainer: function (fieldLabel) {
                return {
                    xtype: 'textfield',

                    emptyText: 'Enter the value',

                    fieldLabel: fieldLabel
                };
            },

            //This function will return tabpanel for form items.

            getContainer: function () {
                var me = this;
                return {
                    xtype: 'tabpanel',

                    allowDestroy: false,

                    //reference: 'abc', //being used in application somewhere

                    layout: 'fit',

                    border: 0,

                    activeTab: 0,

                    items: [{
                        bind: '{tab1}',
                        bodyPadding: 10,
                        layout: 'fit',
                        items: me.createContainer('Tab1 field') // contains form fields

                    }, {
                        bind: '{tab2}',
                        bodyPadding: 10,
                        layout: 'fit',
                        items: me.createContainer('Tab2 field') // contains form fields
                    }, {
                        bind: '{tab3}',
                        bodyPadding: 10,
                        layout: 'fit',
                        items: me.createContainer('Tab3 field') // contains form fields

                    }, {
                        bind: '{tab4}',
                        bodyPadding: 10,
                        layout: 'fit',
                        items: me.createContainer('Tab4 field') // contains form fields
                    }]
                };
            },

            listeners: {
                beforerender: function (cmp) {
                    var me = this;
                    //Add form inside of panel
                    me.add({
                        xtype: 'form',

                        trackResetOnLoad: true,

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

                        items: me.getContainer()
                    });
                }
            }
        });

        //Create the mypanel
        Ext.create({
            xtype: 'mypanel',

            viewModel: {
                type: 'abc'
            },

            bind: '{title}',

            renderTo: Ext.getBody()
        });
    }
});

ExtJS 5 Uncaught TypeError: cannot read property 'parentNode' of null in Tab Panel

1 Answers1