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

Implementing a Tab Panel

Page of 168

Ext.tab.Panel (xtype: tabpanel) is a customized container with a card layout combined with docked toolbar. Users can tap buttons to transition between containers. You can define the animation to use for the card transition, enable the user to reorder tabs, and set the tab bar position to the top or bottom of the tab panel.

You will typically configure the following tab panel properties:

Config Property Description
tabBar Object. An Ext.tab.Bar configuration
tabBarPosition String. The docked position of the tab bar. Valid values are 'top' and 'bottom'

The following example illustrates defining a tab panel with centered buttons. Note that the iconCls property to configure the tab panel's tabs are assigned as a configuration property of the tab panel's member items:

Deploying a tab panel
Ext.define('MyApp.view.MyContainer', {
 extend: 'Ext.Container',
 config: {
  layout: {
   type: 'fit'
  },
  items: [
   {
    xtype: 'titlebar',
    docked: 'top',
    title: 'Friends with Beer'
   },
   {
    xtype: 'tabpanel',
    layout: {
     animation: 'slide',
     type: 'card'
    },
    items: [
     {
      xtype: 'container',
      title: 'Tab 1',
      iconCls: 'info'
     },
     {
      xtype: 'container',
      title: 'Tab 2',
      iconCls: 'info'
     },
     {
      xtype: 'container',
      title: 'Tab 3',
      iconCls: 'info'
     }
    ],
    tabBar: {
     docked: 'bottom',
     layout: {
      pack: 'center',
      type: 'hbox'
     }
    }
   }
  ]
 }
});
Page of 168
comments powered by Disqus