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

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 解决了一个非常类似的问题。我有两个由垂直分隔符分隔的面板，我希望分隔符位置在页面刷新时保持不变。

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

我使用 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);
}

我避免在面板内设置监听器，因为我不知道如何获取分离器对象的句柄。当我发现发送到调整大小事件的上下文参数(在提供的示例代码中名为侧边栏)包含对拆分器对象的引用时，突破就出现了。

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