Question

我有一个包含3个项目的面板。然后是面板，然后是水平分割器，然后是面板。此布局工作正常，用户可以轻松地上下移动分割器以调整相邻面板的大小。

但是如何以编程方式设置拆分器的位置？理想情况下，我想将分离器设置为新的位置。

拆分器有一个方法setPosition，它也接受一个动画参数。但是这种方法只是移动分离器而不改变任何一个面板的高度。因此，分离器现在漂浮在其中一个面板的顶部。在afteranimate监听器中，我尝试了各种各样的doLayout，updateLayout，panel.setHeight等......但似乎没有任何影响面板大小。根据控制台运行代码，它似乎没有做任何事情。

那么改变两个面板之间水平位置的方法是什么？

这是使用Ext 4.1.1a。

splitter.setPosition(0,30,{
    listeners:{
        beforeanimate: function(){
            console.log('animate');
        },
        afteranimate: function(){
            console.log('finished');
            bottomPanel.setHeight(500);  //Does nothing
            splitter.updateLayout(); //Does nothing
            rightColumn.doLayout();  // Puts splitter bar back to the original position
        }
    }
});

Answer 1

我用ExtJS 4.1.3解决了一个非常类似的问题。我有两个面板由垂直分割器分隔，我希望分割器位置在页面刷新时保持不变。

在尝试连接分裂器本身一段时间之后，我放弃了这个想法。我能够以编程方式设置拆分器位置的方式是通过监听其中一个面板的resize事件开始的。

我使用ExtJS状态管理器存储侧边栏的宽度。如果未定义新的宽度参数，那么这是一个页面重新加载的情况，我从状态管理器中获取最后保存的侧边栏面板宽度。我将侧边栏的宽度设置为保存的值，然后将分割器位置设置为比宽度多20个像素（我假设为滚动条的帐户。）

侧边栏面板内：

resize: function (sidebar, newWidth, newHeight, oldWidth, oldHeight) {
    var sidebarWidth = newWidth;
    if (oldWidth === undefined) {
        // page reload. restore width from state manager
        savedWidth = Ext.state.Manager.get('sidebar_width');
        sidebarWidth = savedWidth === undefined ? sidebarWidth : savedWidth;
    }
    sidebar.splitter.setPosition(sidebarWidth + 20);
    sidebar.setWidth(sidebarWidth);
    Ext.state.Manager.set('sidebar_width', sidebarWidth);
}

我避免在面板中设置监听器，因为我不知道如何获得拆分器对象的句柄。当我发现发送到resize事件（在提供的示例代码中命名为sidebar）的context参数保存对splitter对象的引用时，突破就来了。

这个解决方案对我有用，希望通过这个问题对其他人有所帮助。

Ext splitter - 以编程方式更改其位置

1 个答案: