面板VBOX不会渲染项目

Question

标题所暗示的是，我有一个面板，该面板将执行onRender命令以添加项目，例如下面的代码，一个树形面板。 我将treepanel包裹在一个布局-边框中，然后放在一个vbox面板上，以放置在西部区域。 不幸的是，整个树面板无法渲染。 我检查了HTML，其中的元素在那里，但是它们被禁用了，因为元素在萤火虫中具有模糊的字体。 为什么这样做呢？ 请帮忙。

Ext.define('anr.panels.report', {
    extend          : 'Ext.panel.Panel',
    pageLimit       : 15,
    title           : 'Report Generator',
    layout          : 'border',
    border          : false,
    frame           : true,

    initComponent: function() {

        this.callParent(arguments);
    },

    onRender:function() {

        var me = this;

        var store = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true,
                children: [
                    { text: "detention", leaf: true },
                    { text: "homework", expanded: true, children: [
                        { text: "book report", leaf: true },
                        { text: "algebra", leaf: true}
                    ] },
                    { text: "buy lottery tickets", leaf: true }
                ]
            }
        });

         var reportItem = {
            xtype: 'panel',
            layout: 'vbox',
            id:'westpanel',
            region:'west',
            width: 350,
            height: 300,
            minSize: 350,
            maxSize: 350,
            border: false,
            split: true,
            margin: '1 0 5 1',
            items: [
                {
                    border: false,
                    layout: 'border',
                    items:[
                        {
                            xtype: 'treepanel',
                            height: 250,
                            width: 200,
                            store: store,
                            id: 'menu-panel',
                            frame: false,
                            rootVisible: false
                        }
                    ]
                }
            ]
        };

        this.add(reportItem);
        this.callParent(arguments);
    }
});

Answer 1

我不太确定为什么您要使用onRender方法而不是将面板放置在项目中，但是那里总有太多错误。

每个边框面板都需要高度，宽度或弯曲度，并且必须有一个带有中心区域的面板。

如果将代码更改为此，它会起作用，但请注意所有这些嵌套面板，似乎您已经迷路了。

码

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [{ 
            text: "detention", leaf: true 
        },{
            text: "homework", expanded: true, 
            children: [{
                text: "book report", leaf: true 
            },{
                text: "algebra", leaf: true
            }]
        }, { 
            text: "buy lottery tickets", 
            leaf: true 
        }]
    }
});

Ext.define('anr.panels.report', {
    extend : 'Ext.panel.Panel',
    width: 800,
    height: 400,
    border: true,
    title : 'Report Generator',
    layout : 'border',            
    items: [{
        xtype: 'panel',
        layout: 'vbox',
        region:'west',
        width: 350,
        height: 300,
        minSize: 350,
        maxSize: 350,
        border: false,
        split: true,
        margin: '1 0 5 1',
        items: [{
            xtype: 'panel',
            border: false,
            layout: 'border',
            flex: 1,
            width: 350,
            items:[{
                xtype: 'treepanel',
                height: 250,
                width: 200,
                store: store,
                id: 'menu-panel',
                region: 'center',
                frame: false,
                rootVisible: false
            }]
        }]
    },{
        xtype : 'panel',
        region: 'center'
    }]

});

Ext.create('anr.panels.report',{
    renderTo: Ext.getBody()
});