The fit layout is for the container that contains a single item that automatically expands to fill the layout's container. The card layout utilizes the fit layout to fit an item into a card. In this recipe, we will learn about the use of the fit layout.
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
Carry out the following steps:
Create and open a new file named
ch03_06.js
and paste the following code into it:Ext.setup({ onReady: function() { var pnl = new Ext.Panel({ fullscreen: true, layout: 'fit', bodyStyle: 'padding:15px', items: [{ bodyStyle: 'background:grey;', html: '<p>Panel 1</p>' }] }); } });
Update the
index.html
file.Deploy and access it from the browser. The following screenshot shows the view: