如何在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）;