X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..HEAD:/examples/layout-browser/layout-browser.html?ds=sidebyside diff --git a/examples/layout-browser/layout-browser.html b/examples/layout-browser/layout-browser.html index 2ac1d31a..92b0035c 100644 --- a/examples/layout-browser/layout-browser.html +++ b/examples/layout-browser/layout-browser.html @@ -1,360 +1,352 @@ - -
-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.
-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'
-}]
-
-
- 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;
-}
-
-
- 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'
-}]
-
-
- 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'
-}]
-
-
- 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.'
-}]
-
-
-
- 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'
-}]
-
-
- 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'
-}]
-
-
- 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
-}
-
-
- 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'}
-]
-
-
- 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'}
-]
-
-
- This is a useful layout style when you need 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
-}]
-
- A simple 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'
-}
-
- 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.
-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.
-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.
+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'
+}]
+
+
+ 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;
+}
+
+
+ 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'
+}]
+
+
+ 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'
+}]
+
+
+ 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.'
+}]
+
+
+
+ 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'
+}]
+
+
+ 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'
+}]
+
+
+ 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
+}
+
+
+ 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'}
+]
+
+
+ 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}
+]
+
+
+ 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}
+]
+
+
+ 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'
+}
+
+ 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.
+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.
+