extjs 5 中的树面板不呈现

Question

树面板没有得到渲染代码是：

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

请告诉我哪里出错了。提前致谢我得到的错误是

TypeError: c 不是构造函数 return 新 c(a[0])

Answer 1

请查看我为您创建的 Sencha fiddle。

当您试图覆盖 Extjs 的默认组件中的 initComponent 时，会出现此错误。

例如：

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

或

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

如果您想从代码中消除此错误，您需要定义扩展 Extjs 组件的自定义 Component - CustomPanel：

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

在您的代码中的某处 - 创建 CustomPanel:

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

希望这是您正在寻找的东西。

extjs 5 中的树面板不呈现

Tree panel in extjs 5 not rendering

javascript

extjs

extjs-mvc

extjs5