Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Using a Border Layout

Page of 168

The output from the Viewport DefinitionThe Border Layout (Ext.layout.container.Border) is used to split a container into multiple independent regions. It uses a north/south/east/west/center orientation structure as illustrated below:

 

 

Ext.define('MyApp.view.Viewport', {
 extend: 'Ext.container.Viewport',
 requires: ['Ext.layout.container.Border'],
 layout: 'border',
 items: [
  {
   xtype: 'toolbar',
   region: 'north',
   height: 30,
   html: 'toolbar'
  },
  {
   xtype: 'panel',
   region: 'west',
   html: 'Western Region',
   width: 200,
   title: 'Western Region',
   collapseDirection: 'left',
   collapsible: true,
   split: true
  },
  {
   xtype: 'panel',
   itemId: 'centerregion',
   region: 'center',
   html: 'Center region'
  },
  {
   xtype: 'panel',
   region: 'south',
   html: 'Southern region',
   height: 30
  }
 ]
});

Note the following:

  • The 'center' region will automatically flex to take up any available space.
  • Panels can be set to be collapsible.
  • The 'collapseDirection' property refers to the direction in which the panel's header bar will orient itself if the panel is collapsed.
  • The split: true attribute inserts a splitter component that enables the user to drag and resize the two panels that border each other.
Page of 168
comments powered by Disqus