/** * This is a layout for container that contain a single item that automatically expands to * fill the container. This class is intended to be extended or created via the layout:'fit' * {@link Ext.container.Container#layout} config, and should generally not need to be created * directly via the new keyword. * * Fit layout does not have any direct config options (other than inherited ones). To fit a * panel to a container using Fit layout, simply set `layout: 'fit'` on the container and * add a single panel to it. * * ```javascript * @example({ framework: 'extjs' }) * var panel = Ext.create('Ext.Panel', { * title: 'Fit Layout', * width: 300, * height: 150, * layout:'fit', * items: { * title: 'Inner Panel', * html: 'This is the inner panel content', * bodyPadding: 20, * border: false * } * }); * * Ext.Viewport.add(panel); * ``` * ```javascript * @example({framework: 'ext-react', packages:['ext-react']}) * import React, { Component } from 'react'; * import { ExtContainer, ExtPanel } from '@sencha/ext-react'; * * export default class myExample extends Component { * render() { * return ( * <ExtContainer width="300" height="150" layout="fit"> * <ExtPanel title="Inner Panel" bodyPadding="20" border="false"> * This is the inner panel content * </ExtPanel> * </ExtContainer> * ) * } * } * ``` * ```javascript * @example({framework: 'ext-angular', packages:['ext-angular']}) * import { Component } from '@angular/core' * declare var Ext: any; * * @Component({ * selector: 'app-root-1', * styles: [``], * template: ` * <ExtContainer width="300" height="150" layout="fit"> * <ExtPanel * title="Inner Panel" bodyPadding="20" * border="false" * [html]="'This is the inner panel content'" * > * </ExtPanel> * </ExtContainer> * ` * }) * export class AppComponent {} * ``` * ```html * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 }) * <ext-container width="300" height="150" layout="fit"> * <ext-panel title="Inner Panel" bodyPadding="20" border="false"> * This is the inner panel content * </ext-panel> * </ext-container> * ``` * ```javascript * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 }) * import '@sencha/ext-web-components/dist/ext-container.component'; * import '@sencha/ext-web-components/dist/ext-formpanel.component'; * import '@sencha/ext-web-components/dist/ext-spinnerfield.component'; * * export default class FitComponent {} * ``` */Ext.define('Ext.layout.Fit', { extend: 'Ext.layout.Auto', alias: 'layout.fit', isFit: true, cls: Ext.baseCSSPrefix + 'layout-fit', itemCls: Ext.baseCSSPrefix + 'layout-fit-item'});