How to change resizing order of elements on UI?

>dockable panels with auto-layout

Is that what you mean? 



This image from another script by the way (rd_scriptlauncher) , i look its code to learn. I created my UI with the same method, and while his script does what i want (image below) mine doesn't. I tried to dig in to see the difference but couldn't understand what is the reason. 

This is my code by the way;

res = "group{orientation: 'column', alignment: ['fill','fill'],alignChildren:['fill','fill'],\
      \
   tabGroup: Panel{type: 'tabbedpanel', alignment: ['fill','fill'] ,\
       mainTab: Panel{type: 'tab', text: 'My Folder', alignChildren:['fill','fill'],\
           tTree: TreeView{properties: {items:['Item 1','Item 2','Item 3']}},\
},\

.
.
.

}";
        
        myPanel.grp =   myPanel.add(res)
        
        myPanel.grp.tabGroup.mainTab.tTree.preferredSize.height = 150;
        myPanel.grp.tabGroup.preferredSize.width = 100;

//
         myPanel.layout.layout(true);
         myPanel.grp.minimumSize= myPanel.grp.size;
         
//
         myPanel.layout.resize();
         myPanel.onResizing= myPanel.onResize= function(){this.layout.resize()}