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.AbsoluteLayout
-This is a simple layout style that allows you to position items within a container using - CSS-style absolute positioning via XY coordinates.
-Sample Config:
-
-layout: 'absolute',
-items:[{
- title: 'Panel 1',
- x: 50,
- y: 50,
- html: 'Positioned at x:50, y:50'
-}]
- 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;
-}
- Ext.layout.AnchorLayout
-Provides anchoring of contained items to the container's edges. This type of layout is most commonly - seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the - container without hard-coding their dimensions.
-In this example, panels are anchored for example purposes so that you can easily see the effect. - If you resize the browser window, the anchored panels will automatically resize to maintain the - same relative dimensions.
-Sample Config:
-
-layout: 'anchor',
-items: [{
- title: 'Panel 1',
- height: 100,
- anchor: '50%'
-},{
- title: 'Panel 2',
- height: 100,
- anchor: '-100'
-},{
- title: 'Panel 3',
- anchor: '-10, -262'
-}]
- Ext.layout.BorderLayout
-This Layout Browser page is already a border layout, and this example shows a separate border layout - nested within a region of the page's border layout. Border layouts can be nested with just about any - level of complexity that you might need.
-Every border layout must at least have a center region. All other regions are optional.
-Sample Config:
-
-layout:'border',
-defaults: {
- collapsible: true,
- split: true,
- bodyStyle: 'padding:15px'
-},
-items: [{
- title: 'Footer',
- region: 'south',
- height: 150,
- minSize: 75,
- maxSize: 250,
- cmargins: '5 0 0 0'
-},{
- title: 'Navigation',
- region:'west',
- margins: '5 0 0 0',
- cmargins: '5 5 0 0',
- width: 175,
- minSize: 100,
- maxSize: 250
-},{
- title: 'Main Content',
- collapsible: false,
- region:'center',
- margins: '5 0 0 0'
-}]
- Ext.layout.CardLayout (TabPanel)
-The TabPanel component is an excellent example of a sophisticated card layout. Each tab is just - a panel managed by the card layout such that only one is visible at a time. In this case, configuration - is simple since we aren't actually building a card layout from scratch. Don't forget to set the - activeItem config in order to default to the tab that should display first.
-Sample Config:
-
-xtype: 'tabpanel',
-activeItem: 0, // index or id
-items:[{
- title: 'Tab 1',
- html: 'This is tab 1 content.'
-},{
- title: 'Tab 2',
- html: 'This is tab 2 content.'
-},{
- title: 'Tab 3',
- html: 'This is tab 3 content.'
-}]
- Ext.layout.CardLayout (Wizard)
-You can use a CardLayout to create your own custom wizard-style screen. The layout is a standard - CardLayout with a Toolbar at the bottom, and the developer must supply the navigation function - that implements the wizard's business logic (see the code in basic.js for details).
-Sample Config:
-
-layout:'card',
-activeItem: 0, // index or id
-bbar: ['->', {
- id: 'card-prev',
- text: '« Previous'
-},{
- id: 'card-next',
- text: 'Next »'
-}],
-items: [{
- id: 'card-0',
- html: 'Step 1'
-},{
- id: 'card-1',
- html: 'Step 2'
-},{
- id: 'card-2',
- html: 'Step 3'
-}]
- Ext.layout.ColumnLayout
-This is a useful layout style when you need multiple columns that can have varying content height. - Any fixed-width column widths are calculated first, then any percentage-width columns specified using - the columnWidth config will be calculated based on remaining container width. Percentages - should add up to 1 (100%) in order to fill the container.
-Sample Config:
-
-layout:'column',
-items: [{
- title: 'Width = 25%',
- columnWidth: .25,
- html: 'Content'
-},{
- title: 'Width = 75%',
- columnWidth: .75,
- html: 'Content'
-},{
- title: 'Width = 250px',
- width: 250,
- html: 'Content'
-}]
- Ext.layout.FitLayout
-A very simple layout that simply fills the container with a single panel. This is usually the best default - layout choice when you have no other specific layout requirements.
-Sample Config:
-
-layout:'fit',
-items: {
- title: 'Fit Panel',
- html: 'Content',
- border: false
-}
- Ext.layout.FormLayout
-FormLayout has specific logic to deal with form fields, labels, etc. While you can use a FormLayout in - a standard panel, you will normally want to use a FormPanel directly in order to get form-specific functionality - like validation, submission, etc. FormPanels use a FormLayout internally so the layout config is not needed - (and the layout may not render correctly if overridden).
-Sample Config:
-
-xtype: 'form', // FormPanel
-labelWidth: 75,
-width: 350,
-defaultType: 'textfield',
-items: [{
- fieldLabel: 'First Name',
- name: 'first',
- allowBlank:false
- },{
- fieldLabel: 'Last Name',
- name: 'last'
- },{
- fieldLabel: 'Company',
- name: 'company'
- },{
- fieldLabel: 'Email',
- name: 'email',
- vtype:'email'
- }
-],
-buttons: [
- {text: 'Save'},
- {text: 'Cancel'}
-]
- Ext.layout.TableLayout
-Outputs a standard HTML table as the layout container. This is sometimes useful for complex layouts - where cell spanning is required, or when you want to allow the contents to flow naturally based on standard - browser table layout rules.
-Sample Config:
-
-layout:'table',
-layoutConfig: {
- columns: 3
-},
-items: [
- {html:'1,1',rowspan:3},
- {html:'1,2'},
- {html:'1,3'},
- {html:'2,2',colspan:2},
- {html:'3,2'},
- {html:'3,3'}
-]
- 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}
-]
- Ext.layout.HBoxLayout
-A layout that allows for the vertical and horizontal stretching of child items, much like the column - layout but can stretch items vertically.
-Sample Config:
-
-layout:'hbox',
-layoutConfig: {
- align : 'stretch',
- pack : 'start',
-},
-items: [
- {html:'panel 1', flex:1},
- {html:'panel 2', width:150},
- {html:'panel 3', flex:2}
-]
- Ext.ux.layout.RowLayout
-This is a custom layout that is useful when you need a layout style with multiple rows of content. - Any fixed-height rows are calculated first, then any percentage-height rows specified using the - rowHeight config will be calculated based on remaining container height. Percentages - should add up to 1 (100%) in order to fill the container. Standard panel widths (fixed or - percentage) are also supported.
-Sample Config:
-
-layout:'ux.row',
-items: [{
- title: 'Height = 25%',
- rowHeight: .25,
- width: '50%'
-},{
- title: 'Height = 100px',
- height: 100,
- width: 300
-},{
- title: 'Height = 75%',
- rowHeight: .75
-}]
- Ext.ux.layout.CenterLayout
-This is a custom layout for centering contents within a container. The only requirement is - that the container have a single child panel with a width specified (fixed or percentage). - The child panel can then contain any content, including other components, that will display - centered within the main container. To make the centered panel non-visual, remove the title - and add border:false to the child config.
-Sample Config:
-
-layout:'ux.center',
-items: {
- title: 'Centered Panel',
- width: '75%',
- html: 'Some content'
-}
- Tabs With Nested Layouts
-There are multiple levels of layout nesting within three different TabPanels in this example. - Each tab in a TabPanel can have its own separate layout. As we can see, some have plain content, - while others contain full BorderLayouts. There is also a fully-loaded grid nested down inside - the inner-most tab, showing that there is no limit to how complex your layout can be.
-One of the trickiest aspects of deeply nested layouts is dealing with borders on all the - different panels used in the layout. In this example, body padding and region margins are used - extensively to provide space between components so that borders can be displayed naturally in - most cases. A different approach would be to minimize padding and use the config properties - related to borders to turn borders on and off selectively to achieve a slightly different look - and feel.
-Complex Layout
- -Absolute Layout Form
-FormLayout supports absolute positioning in addition to standard anchoring for flexible control over - positioning of fields and labels in containers. In this example, the top and left positions of the labels - and fields are positioned absolute, while the field widths are anchored to the right and/or bottom of the container.
-