- Ext JS 3.0 Cookbook
- Jorge Ramon
- 198字
- 2021-04-01 13:43:48
Taking all the browser window's real estate
There are times when you want a component to automatically expand and fill its container. In the following screenshot, you'll see how a panel can be made to take up the whole browser window using a FitLayout layout manager:
How to do it...
- Create the panel that will take all of its container's area:
greedyPanel={ title: 'Fit Layout', html: 'Panel using FitLayout' } - The container is the one that lets its children fill the area:
var container=new Ext.Viewport({ layout: 'fit', defaults: { bodyStyle: 'padding:10px' }, items: [ greedyPanel ] });
Note the use of the layout:'fit' configuration option. FitLayout automatically expands the panel to fill its container, the Ext.ViewPort instance. The Viewport renders itself to the document body and automatically resizes itself to the size of the browser's viewport.
When using fit layouts, you should be aware that if the container has multiple panels, only the first one will be displayed. Also, the Viewport class does not provide scrolling. If child panels within the Viewport need scrolling, it should be enabled with the autoScroll configuration option. There may only be one Viewport created in a page.
- ANSYS19.0實例詳解
- SolidWorks 2008機械設計一冊通
- 中文版Premiere Pro CC實用教程
- 邊做邊學：Photoshop+CorelDRAW綜合實訓教程
- Photoshop影視動漫角色繪制技法精解
- 中文版Photoshop CC平面設計從入門到精通（唯美）
- SOA Patterns with BizTalk Server 2009
- 虛擬現實：沉浸于VR夢境
- Unreal Development Kit Beginner's Guide
- 中文版3ds Max 2016/VRay效果圖制作實戰基礎教程（全彩版）
- Photoshop 2020實戰從入門到精通（超值版）
- Photoshop+Illustrator+CorelDRAW一站式高效學習一本通
- Building Websites with Mambo
- Alfresco 3 Cookbook
- 新印象：After Effects移動UI動效制作與設計精粹