X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..HEAD:/examples/layout-browser/layout-browser.html diff --git a/examples/layout-browser/layout-browser.html b/examples/layout-browser/layout-browser.html index b888ae5a..92b0035c 100644 --- a/examples/layout-browser/layout-browser.html +++ b/examples/layout-browser/layout-browser.html @@ -1,426 +1,352 @@ - - - - ExtJS Layout Examples - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
-
-

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'
-}]
-            
-

API Reference

-
-
-

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.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'
-}]
-            
-

API Reference

-
-
-

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'
-}]
-            
-

API Reference

-
-
-

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',
-activeTab: 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.'
-}]
-            
-

CardLayout API Reference

-

TabPanel API Reference

-
-
-

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'
-}]
-            
-

API Reference

-
-
-

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'
-}]
-            
-

API Reference

-
-
-

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
-}
-            
-

API Reference

-
-
-

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'}
-]
-            
-

API Reference

-
-
-

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'}
-]
-            
-

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.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}
-]
-            
-

API Reference

-
- - - -
-

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.

-
-
- - + + + + + ExtJS Layout Examples + + + + + + + + + + + + + + + + + +
+ + +
+
+
+

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.container.Absolute

+

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'
+}]
+            
+

API Reference

+
+
+

Ext.layout.container.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.container.Anchor

+

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'
+}]
+            
+

API Reference

+
+
+

Ext.layout.container.Border

+

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'
+}]
+            
+

API Reference

+
+
+

Ext.layout.container.Card (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',
+activeTab: 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.'
+}]
+            
+

Card layout API Reference

+

TabPanel API Reference

+
+
+

Ext.layout.container.Card (Wizard)

+

You can use a Card layout 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'
+}]
+            
+

API Reference

+
+
+

Ext.layout.container.Column

+

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'
+}]
+            
+

API Reference

+
+
+

Ext.layout.container.Fit

+

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
+}
+            
+

API Reference

+
+
+

Ext.layout.container.Table

+

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: {
+    type: 'table',
+    columns: 4
+},
+items: [
+    {html:'1,1',rowspan:3},
+    {html:'1,2'},
+    {html:'1,3'},
+    {html:'2,2',colspan:2},
+    {html:'3,2'},
+    {html:'3,3'}
+]
+            
+

API Reference

+
+ +
+

Ext.layout.container.VBox

+

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

+

Sample Config:

+

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

API Reference

+
+ +
+

Ext.layout.container.HBox

+

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: {
+    type: 'hbox',
+    pack: 'start',
+    align: 'stretch'
+},
+items: [
+    {html:'panel 1', flex:1},
+    {html:'panel 2', width:150},
+    {html:'panel 3', flex:2}
+]
+            
+

API Reference

+
+ + + +
+

Ext.ux.layout.Center

+

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 fixed width or a percentage ratio specified. + 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',
+    widthRatio: 0.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.

+
+
+ +