Tree panel in extjs 5 not rendering

Question

The tree panel doesn't get rendered Code is :

Ext.define('mainPanel',{
    extend:'Ext.form.Panel',
    layout: {
    type: 'hbox',
    align: 'stretch'
    },
    width:'100%',
    height:'100%',
    title:'SQL',
    initComponent:function()
    {
        var tableDiv = this.getTableColumn();
        var analyzerDiv = this.getAnalyzerColumn();
        var fieldDiv = this.getfieldColumn();
        this.items=[tableDiv,analyzerDiv,fieldDiv];
        this.callParent();
    },
    getTableColumn:function()
    {   
        var TableColumn = Ext.create('Ext.tree.Panel',{
                            title:'Tables',
                            width:'20%',
                            heigth:'100%',
                            layout: 'fit',
                            border:true,
                            store: tableTreeStore,
                            rootVisible: false

                        });
        return TableColumn;
    }

Pls let me know where i am going wrong. Thanks in advance the error i get is

TypeError: c is not a constructor return new c(a[0])

Answer 1

Please check this Sencha fiddle that i created for you.

This error exists when you are trying to override initComponent in default component of Extjs.

For example:

Ext.define('Ext.panel.Panel',{
    initComponent: function(){
        //YourCode
    }
});

Or

Ext.create('Ext.panel.Panel', {
    initComponent: function(){
        //Yourcode
    }
});

If you want eradicate this error from your code you need to for example define your custom Component - CustomPanel that extend Extjs component:

    var panel = Ext.define('CustomPanel', {
                    extend: 'Ext.panel.Panel',
                    width:300,
                    heigth:400,
                    layout: 'fit',
                    initComponent: function(){
                        var tableDiv = this.getTableColumn();
                        this.items=[tableDiv];
                        this.callParent();
                    },
                getTableColumn:function() {   
                   return Ext.create('Ext.tree.Panel',{
                   title:'Tables',
                   width:300,
                   heigth:400,
                   layout: 'fit',
                   border:true,
                   store: tableTreeStore,
                   rootVisible: false
               });
          }
    });

And somewhere in your code - creation of CustomPanel:

    Ext.create('CustomPanel', {       
    }); 

Hope this is something that you were looking for.