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

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（）。down（'。x-grid-view'）。scrollTo（'top'，scrollPos，true）;

要将scrollPos设置在顶部位置： Mypanel.getEl（）。down（'。x-grid-view'）。scrollTo（'top'，0，true）;