Welcome!

There are many sample layouts to choose from that should give you a good head start in building your own application layout. Just like the combination examples, you can mix and match most layouts as needed, so don't be afraid to experiment!

Select a layout from the tree to the left to begin.

Ext.layout.Accordion

Displays one panel at a time in a stacked layout. No special config properties are required other than the layout — all panels added to the container will be converted to accordion panels.

Sample Config:


layout: 'accordion',
items:[{
    title: 'Panel 1',
    html: 'Content'
},{
    title: 'Panel 2',
    id: 'panel2',
    html: 'Content'
}]

You can easily customize individual accordion panels by adding styles scoped to the panel by class or id. For example, to style the panel with id 'panel2' above you could add rules like this:


#panel2 .x-panel-body {
    background:#ffe;
    color:#15428B;
}
#panel2 .x-panel-header-text {
    color:#555;
}

API Reference

Ext.layout.VBoxLayout

A layout that allows for the vertical and horizontal stretching of child items, much like the container layout with size management.

Sample Config:


layout:'vbox',
layoutConfig: {
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', height:150},
    {html:'panel 3', flex:2}
]

API Reference

Ext.ux.tot2ivn.AccordionVboxLayout

This is a layout that manages multiple Panels in an expandable hybrid style between AccordionLayout and VBoxLayout such that multiple panels can be collapsed or expanded at a time and the sizes of other panels are automatically resized according to the new empty space available. Each Panel has built-in support for expanding and collapsing. And the size of the panels can be flexibly defined as in the VBoxLayout, with the powerful 'flex' property.

Sample Config:


layout:'ux.accordionvbox',
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px',
		collapsible: true,
		flex			: 1			// The sizes of panels are divided according to the flex index
    },
    layoutConfig: {
		align 			: 'stretch',
		pack  			: 'start',
		animate			: true,
		titleCollapse	: true							    
	},
    items: [{
        title: 'Panel 1',
        html: ''
    },{
        title: 'Panel 2',
        html: ''
    },{
        title: 'Panel 3',
        html: ''
    }]