面板 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()
});