extjs - 无法在 extjs 中的两个面板之间创建分割区域

Question

我已经使用split: true并且它一直有效，直到我遇到以下情况：

centerContent = new Ext.Panel
({
    layout: 'border',
    split:true,
    stateful:true,
    border:false,

    items: 
    [
        {
            region:'center',
            margins:'0 0 0 0',
            autoScroll:true,
            split: true,
            items: 
            [
                {
                    region: 'north',
                    height: 250,
                    minSize: 150,
                    frame:false,
                    border:false,
                    layout:'fit',
                    items: blah
                },
                {
                    title:'Graph',
                    region:'south',
                    margins:'0 0 0 0',
                    collapsible: true,
                    split:true,
                    frame:false,
                    border:false,
                    height: 500,
                    minSize: 250,
                    layout:'fit',
                    items: anotherBlah
                }    
            ]       
        }                   
    ]

});

我试着split: true到处放，但仍然没有结果。为了说明这段代码的结果，我附上了一张图片：

北部区域没有标题，但它呈现为item: blah. 从图片中可以看出，南部地区有标题“图表”。我希望能够在必要时从北方分裂/拖下南方地区。但是那个“拆分工具”不会出现。 你知道我错过了什么吗？

Answer 1

您不能在同一个容器中进行边框布局和自动滚动。原因是边框布局将使其子组件适合可用空间，因此它们永远不会溢出。

因此，为了实现您想要的，您需要一个具有固定高度的内部容器（以便它溢出其父级）在一个带有autoScroll. 然后将边框布局应用于该内部容器。

示例（jsFiddle）：

Ext.widget('container', {
    renderTo: Ext.getBody()

    // the 300px container contains a 500px child: it will scroll
    ,width: 300
    ,height: 300
    ,autoScroll: true

    ,items: [{
        xtype: 'container'
        ,height: 500
        // the 500px container has border layout
        ,layout: 'border'
        ,items: [{
            // you are required to have a center region, so use center and south
            title: 'Center'
            ,region: 'center'
            ,height: 200
        },{
            title: 'South'
            ,region: 'south'
            ,split: true
            ,height: 300
        }]
    }]
});