How can I add height and Width on Top and Left side of a Panel respectively in Ext js panel?

Question

I have created a TabPanel in Ext js 4.0.

I add some grids dynamically to the panel. The size of the panel increases when the number of grids increase.

Below are the screenshot to represent it:

Panel with Single Grid:

In the above picture I have added single grid. Now I will add few more grids to the same below the existing grid as follows:

Panel with Multiple Grid:

As you can see in the second picture the height of the panel is increased and a scrollbar has come up on right side of the panel.

Now in the above example the height of the panel is increasing from the bottom of the panel. But I want to add grids on top of the first grid and increase the height on top side of the panel.

Similarly I want to increase width on left side of panel. How can this be done?

I don't want to add the grid at top and move all the other grids to the bottom because there are large number of grids present in the panel which are arranged relative to each other.

Answer 1

This can't be done as you would like it to, because the reference point in ExtJS and plain JavaScript and HTML always is the top left, which is (0,0).

If you want to add a grid above the other grids, you have to use container.insert(0,component) , thereby changing the position of all the other grids. You can then scrollTo the bottom.

Answer 2

You can set add manually grids on panel at first position like :

var Mypanel = Ext.ComponentQuery.query('#mypanel')[0];

Mypanel.insert(0,cmp1);

Even you can set manually position of scrollbar at top by using below example. scrollbar position on adding each

scrollPos = Mypanel.getEl().down('.x-grid-view').getScroll().top;

To set dynamically scrollPos : Mypanel.getEl().down('.x-grid-view').scrollTo('top',scrollPos,true);

To set scrollPos at top position : Mypanel.getEl().down('.x-grid-view').scrollTo('top',0,true);