Question

我正在使用ExtJS版本5.1.0。

问题：我的观点中有Ext.panel.Panel。在此面板的beforeRender中，我正在尝试添加xtype:'form'，其项目包含tabpanel，其中包含多个标签。

当我在其他标签上等待几秒后切换标签时，我得到了这个例外

Uncaught TypeError: cannot read property 'parentNode' of null

结果，切换标签的整个视图丢失（空白）。

我已经尝试了一段时间，但无法找到解决方案。

对此的任何建议都会有很大的帮助。

这是我的代码段：

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  
                    ]
                }

            ]

        });
    }
});

这不是重复，这是与tabpanel相关的问题，而不是简单的HTML。它使用框架相关的知识。如果有人对此有所了解，请解释一下。

Answer 1

首先，您需要使用beforerender事件而非 beforeRender ，而beforerender将在listeners内。

此外，您可以直接返回xtype，而不是像下面的示例那样创建

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

         emptyText: 'Enter the value',

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

在 FIDDLE 中，我使用您的代码创建了一个演示并进行了一些修改。我希望这有助于/指导您实现您的要求。

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：无法读取属性＆＃39; parentNode＆＃39;选项卡面板中的null

1 个答案: