The dock panel is used to position the child content along the edge of a layout container. Sencha Touch provides the mechanism to dock items along any of the four edges: top
, left
, bottom
, and right
. In this recipe, we will see what needs to be done to use a dock
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_05.js
and paste the following code into it:Ext.setup({ onReady: function() { var pnl = new Ext.Panel({ fullscreen: true, bodyStyle: 'padding:15px', dockedItems: [{ dock : 'top', bodyStyle: 'background:grey;', html: '<p>Panel 1</p>' },{ dock : 'bottom', bodyStyle: 'background:blue;', html: '<p>Panel 2</p>' },{ dock : 'right', bodyStyle: 'background:green;', ...