Panel docking using DockLayout

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.

Getting ready

Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.

How to do it...

Carry out the following steps:

  1. 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', ...

Get Sencha Touch Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial