cq9跳高高打法视频

書(shū)名： Ext JS 3.0 Cookbook
作者名： Jorge Ramon
本章字?jǐn)?shù)： 198字
更新時(shí)間： 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
]
});

How it works...

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.

There's more...

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.

官术网_书友最值得收藏!

Ext JS 3.0 Cookbook

Taking all the browser window's real estate

How to do it...

How it works...

There's more...