如何在Ext js面板中分别在Panel的顶部和左侧添加高度和宽度？

Question

我在Ext js 4.0中创建了一个TabPanel。

我动态地向面板添加了一些网格。当网格数量增加时，面板的尺寸会增加。

以下是代表它的截图：

单网格面板：

在上图中我添加了单格。现在，我将在现有网格下面添加更多网格，如下所示：

具有多个网格的面板：

正如您在第二张图片中看到的那样，面板的高度增加了，并且面板的右侧出现了一个滚动条。

现在在上面的示例中，面板的高度从面板的底部开始增加。但我想在第一个网格的顶部添加网格，并增加面板顶部的高度。

同样我想增加面板左侧的宽度。 怎么办呢？

我不想在顶部添加网格并将所有其他网格移到底部，因为面板中存在大量相对于彼此排列的网格。

Answer 1

这不能按照您的意愿完成，因为ExtJS和普通JavaScript和HTML中的参考点始终是左上角，即（0,0）。

如果要在其他网格上方添加网格，则必须使用container.insert(0,component)，从而更改所有其他网格的位置。然后你可以scrollTo在底部。

Answer 2

您可以在第一个位置的面板上设置添加手动网格，如：

var Mypanel = Ext.ComponentQuery.query（'＃mypanel'）[0];

Mypanel.insert（0，CMP1）;

即使您可以使用以下示例手动设置顶部滚动条的位置。 添加每个

时的滚动条位置

scrollPos = Mypanel.getEl（）。down（'。x-grid-view'）。getScroll（）。top;

动态设置scrollPos： Mypanel.getEl（）向下（ 'x栅格视图。 '）scrollTo（' 顶部'，scrollPos，TRUE）;

将scrollPos设置在顶部位置： Mypanel.getEl（）向下（ 'x栅格视图。 '）scrollTo（' 顶部'，0，真）;