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 the fit and card Layout Managers

Page of 168

Using the Fit Layout

As illustrated by the following example, the fit layout manager expands the child item in a layout to fit the size of its container. As in the movie Highlander, there can be only one item in a fit layout.

The stylesheet:
.colorizeParent {
 border: 2px dotted red;
 background-color: silver;
}

.colorizeChild {
 border: 1px dotted red;
 background-color: yellow;
}

The layout script:
Using the "fit"  layout
Ext.Viewport.add([
 {
   xtype: 'container',
   layout: 'fit',
   cls: 'colorizeParent',
   width: 200,
   height: 100,
   items: [
    { 
     html: 'Hello World',  
     xtype: 'component',
     cls: 'colorizeChild',
     margin: '5 5 5 5'
    }
   ]
  }
]);

Using the Card Layout and Animating Transitions

As illustrated by the following example, the card layout arranges child items into a virtual deck of cards. Invoking the parent container's setActiveItem() method enables you to control which child item is visible. Note that you can also set an animation transition that is executed when the setActiveItem() method is invoked.


The following animations are supported:
  • cover
  • cube
  • fade
  • fade
  • flip
  • pop
  • reveal
  • scroll
Ext.Viewport.add([
 {
  xtype: 'container',
  layout: {
    type: 'card',
    animation: 'flip'
  },
  itemId: 'mycontainer',
  cls: 'colorizeParent',
  width: 200,
  height: 100,
  defaults: {
   xtype: 'component',
   cls: 'colorizeChild',
   margin: '5 5 5 5'
  },
  items: [
   {  html: 'Hello' },
   {  html: 'World' },
   {
      xtype: 'button',
      docked: 'bottom',
      text: 'Change View',
      handler: function() {
        var cntr = Ext.ComponentQuery.query("#mycontainer")[0];
        cntr.setActiveItem(1);
      }              
    }
  ]
 }
]);

Page of 168
comments powered by Disqus