Layout Management in Extjs 4.0

I want to share my experience about panel layouts in Extjs 4.0. Some of them may not be valid in future releases.

a)Panel or Container: There is a little difference between two of them. Container has no element intially. If you use an empty conatiner in a panel, you cannot see a difference in panel. But panel gives us a div element which has a white background and a border as default. You can throw out border and frame using properties but still you will get an extra div element. When inserting a new element with a fit layout you will get same screen in both cases.

b)viewport or border: It may be difficult to understand why viewport is used instead of border layout. The main difference is that viewport uses Ext.getBody() when rendering itself. That means you dont need to write renderTo:Ext.getBody() line. However as you guess, you cannot use two viewports in one page, Every page must have a one renderer that uses body. Border layout just use its parent panel when rendering. You should use one viewport as your main layout and any number of border layouts in sub panels.

Collapsible Panels: In both border and viewport, any of subitems(center,north,south,west,east) can be collapsible by setting collapsible:true but there are some issues in collapsible panels.

1)If you collapse center panel, south panel cannot resize itself like flex structure. You need to manually set its height when a collapse occurs. But then when you try to resize center panel, it will not return to its original size since you manually change height of the south panel. In Extjs forums, it is not considered as bug and some guys suggests to use vbox instead of border but vbox has its own limitations.

2)When you set a panel as collapsible, header panel is forced to show. This header in most cases result in an absurd layout if you dont want to use title. You can configure to hide header panel, but this will result in a problematic minimized panel in center region. The obvious solution is to construct your own collapse expand button. You can add this button whenever you want, You just need to set height to 0 or main panels height for minimize and maximize.

3)In IE 8, collapse animation in south panel gives a style error after collapse/expand certain amount. Setting animCollapse ot false fix this issue. I thing they will fix it in future releases.

4)If you dont use center panel, extjs will definitely give you an error.

5)In order to resize sub panels, resizable or split can be used. Resizable will put a border to your panel when you want to resize. Resize property is like resizing an image like element. But split is like Telerik or devexpress split component which is used between panels.

6)Adding removing subpanels: It is vital to know that you cannot dynamically add or remove a component of border layout. It is suggested to use main region panels as containers and add/delete panels within them.

c)vbox and hbox: These are used to vertically and horizantally align panels. In sub panels, there is an important property related with layout: flex.You can give an exact width or height or use a flex number. When calculating width or height for a sub panel, first exact numbers are summed, these number is substracted from total width or height. Then remaining number is divided into flex number.  For instance, if you have two sub panels with flex:1 and a sub panel with width:10. Then 10  is substracted from main panels's width.Remaining number is divided by two. These result will be remaining panels' width. Flex also dynamically change when you change one of the panel's width or height.

d)Removing panels permanently or temporarily: When you want to change content of a panel, you may want to just destroy content or toggle between panels. Destroying a panel will result in destroying the panel and all sub panels within this panel permanently. If you use an id for calling this panel, you will get an error after destroying it. You can deal with this problem with using dynamic creation of panels(Ext.create) in run time and using dynamically created panel's id(subpanel.id). If you dont want to destroy your panel but hide it for a certain amount of time, you can remove sub panel using this:
mainPanel.remove(subPanel,false);
Beware that using this structure too much may lead to too much resource consumption.

e)Using config or Ext.create for subPanels: Both will give us same results with a small difference. If you keep config objects and use them in your viewport (or a panel which renders to body), all of rendering will be done at the end. You can modify easily among configs before actually showing them. This will save certain amount of time since DOM manipulation is always costly. However before viewport is called, you cannot reach sub panels elements by calling Ext.getCmp('sub panel name') since it is not created yet. you need to change config instead. Since some of the properties cannot be changed after creation (for instance id), you should use config objects instead of creating them.

f)Menu: Menu is generally used in two cases: First one is button. If you add items to button, these items will be considered as menu items. Second one is context menu. When you right click an item(grid or tree item in most cases) you may need to show a menu. It is a bit tricky than button since you need to handle where to show menu. You also need to cancel standard rigt click menu.