Question

正如标题所暗示的那样，我有一个面板，它将执行一个命令onRender来添加项目，如下面的代码，一个treepanel。我在一个布局中包装了treepanel - border，然后在一个vbox面板上将它放在了west的区域。不幸的是整个树面板都没有渲染。我检查了HTML，并且元素在那里，但它们有点被禁用，因为元素在firebug中有那么模糊的字体。它为什么这样做？请帮忙。

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方法而不是将面板放在项目中，但无论如何都有太多的错误。

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

如果您将代码更改为此代码，它会起作用，但要小心所有这些嵌套面板，您似乎迷路了。

<强> CODE

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

面板VBOX不呈现项目

1 个答案: