Ignite UI™ API Documentation

ui.igLayoutManager

Overview
Options
Events
Methods
Theming

The igLayoutManager is a widget based on jQuery UI that implements different layout modes into a page. Modes include flow layout, vertical layout and a border layout, which divides the container into left/right/footer/header/center regions. Further, the responsive and fluid column layouts are based on a 12 column layout grid. Also supported is a grid layout which allows items to be positioned at arbitrary places on the screen and have variable row and col spans.

The following code snippet demonstrates how to initialize the igLayoutManager.

For details on how to reference the required scripts and themes for the igLayoutManager control read, Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

    <!doctype html>
      <html>
      <head>
          <!-- Infragistics Combined CSS -->
          <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
          <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
          <!-- jQuery Core -->
          <script src="js/jquery.js" type="text/javascript"></script>
          <!-- jQuery UI -->
          <script src="js/jquery-ui.js" type="text/javascript"></script>
          <!-- Infragistics Combined Scripts -->
          <script src="js/infragistics.core.js" type="text/javascript"></script>
          <script src="js/infragistics.lob.js" type="text/javascript"></script>
    
      </head>
         <body>
	      <style type="text/css">

		      body {
			      font-family: "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif;
			      background-color: #fff;
		      }

		      .col3 {
			      background-color: #EEE;
			      color: #555;
			      padding: 0 20px 20px 20px;
			      margin: 0 0 20px 0;
		      }

		      #layout .col12 {
			      border:2px dashed #999;
			      margin: 0 0 20px 0;
		      }

		      #layout .col7 {
			      background-color: #FFA72D;
			      color: #FFF;
			      padding: 0 20px 20px 20px;
			      margin: 0 0 20px 0;
		      }

		      #layout .col4 {
			      background-color: #ffaf41;
			      color: #fff;
			      padding: 0 20px 20px 20px;
		      }

		      #layout .col2 {
			      background-color: rgb(0, 155,225);
			      color: #FFF;
			      padding: 0 20px 20px 20px;
		      }

		      #layout .col5 {
			      background-color: #00CCFF;
			      padding: 0 20px 20px 20px;
			      color: #FFF;
		      }
	      </style>
	      <div id="layout" class="ig-layout-col">
		      <div class="row">
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
			      <div class="col3">
			      <p>
				      <h3>Heading</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor.
			      </p>
			      </div>
		      </div>
		      <div class="row">
			      <div class="col12">
				      <div class="col7">
				      <p>
					      <h3>This is a paragraph that spans 7 cols</h3>
					      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus. 
				      </p>
				      </div>
			      </div>
		      </div>
		      <div class="row">
			      <div class="col2">
			      <p>
				      <h3>This paragraph spans 2 cols.</h3>
				      This is a paragraph that spans 2 cols. it goes to the next line because the above paragraph is wrapped in a 12-col container (pink border) 
				
			      </p>
			      </div>
			      <div class="col5">
			      <p>
				      <h3>This is a paragraph that spans 5 cols</h3>
				      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel tortor vitae lacus semper viverra id ac risus. Nam id magna nibh, eget sagittis enim. Morbi velit purus, posuere id aliquet ac, elementum vitae tortor. Sed vestibulum porta risus, condimentum consequat ligula egestas a. Proin suscipit bibendum interdum. Vestibulum non velit sem, quis porttitor magna. Morbi placerat suscipit nunc. Aenean ut blandit purus. Nulla interdum quam eu nunc tempor dapibus. 
			      </p>
			      </div>
		      </div>
	      </div>
      </body>

      </html>

Related Samples

borderLayout

Type:: object
Default:: {}

Options specific to a border layout.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
	        layoutMode: "border",
	        borderLayout: {
		        leftWidth: "10%",
		        rightWidth:"20%",
		        showFooter: true,
		        showHeader: true,
		        showLeft: true,
		        showRight: true
	        }
      });
      
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");

leftWidth

Type:: string
Default:: "20%"

Option specifying the width of the left region, either in px or percentages.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          borderLayout: {
            leftWidth: "10%"
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var leftWidth = borderLayout.leftWidth;

rightWidth

Type:: string
Default:: "10%"

Option specifying the width of the right region, either in px or percentages.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          borderLayout: {
            rightWidth: "10%"
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var rightWidth = borderLayout.rightWidth;

showFooter

Type:: bool
Default:: true

Option specifying whether the footer region in the border layout will be hidden or shown.

Code Sample

         
      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          borderLayout: {
            showFooter: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showFooter = borderLayout.showFooter;

showHeader

Type:: bool
Default:: true

Option specifying whether the header region in the border layout will be hidden or shown.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		  layoutMode: "border",
		  borderLayout: {
			showHeader: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showHeader = borderLayout.showHeader;

showLeft

Type:: bool
Default:: true

Option specifying whether the left region in the border layout will be hidden or shown.

Code Sample

 
      //Initialize
      $('.selector').igLayoutManager({
		  layoutMode: "border",
		  borderLayout: {
			  showLeft: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showLeft = borderLayout.showLeft;

showRight

Type:: bool
Default:: true

Option specifying whether the right region in the border layout will be hidden or shown.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		  layoutMode: "border",
		  borderLayout: {
			  showRight: true
          }
      });
          
      //Get
      var borderLayout = $('.selector').igLayoutManager("option", "borderLayout");
      var showRight = borderLayout.showRight;

gridLayout

Type:: object
Default:: {}

Options specific to grid layout mode.

Code Sample

	  //Initialize
	  $('.selector').igLayoutManager({
		layoutMode: "grid",
		width: "500px",
		height: "500px",
		gridLayout: {
			cols: 3,
			rows: 3,
			columnWidth: 200,
			columnHeight: 200,
			animationDuration : 500,
			marginLeft: 10,
			marginTop : 10,
			rearrangeItems: true
		},
		items: [
		  {
			rowSpan: 2,
			colSpan: 2,
			colIndex: 0,
			rowIndex: 0
		  },
		  {
			rowSpan: 1,
			colSpan: 1,
			rowIndex: 0,
			colIndex: 1
		  },
		  {
			rowSpan: 1,
			colSpan: 1,
			rowIndex: 0,
			colIndex: 2
		  }
		]
	  });
           
	  //Get
	  var gridLayout = $('.selector').igLayoutManager("option", "gridLayout");

animationDuration

Type:: number
Default:: 500

Specifies the duration of the animations in the layout manager's grid layout.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            animationDuration : 500
          }
      });
            
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var animationDuration = gridLayout.animationDuration;
            
      //Set
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      gridLayout.animationDuration = 500;
      $('.selector').igLayoutManager('option', 'gridLayout', gridLayout);

cols

Type:: number
Default:: null

Number of columns in the grid.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            cols : 3
          }
      });
           
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var cols = gridLayout.cols;

columnHeight

Type:: object
Default:: null

Accepts number or string with height in px or percents.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "grid",
		gridLayout: {
		  columnHeight: 200
		}
      });
             
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var columnHeight = gridLayout.columnHeight;

columnWidth

Type:: object
Default:: null

Accepts number or string with width in px or percents.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            columnWidth: 200
          }
      });
             
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var columnWidth = gridLayout.columnWidth;

marginLeft

Type:: number
Default:: 0

Specifies the margin left css property for items.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          width: "75%",
          height: "500px",
          gridLayout: {
			marginLeft : 10
          }  
      });
                
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var marginLeft = gridLayout.marginLeft;

marginTop

Type:: number
Default:: 0

Specifies the margin top css property for items.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            marginTop : 10
          }
      });
                
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var marginTop = gridLayout.marginTop;

overrideConfigOnSetOption

Type:: bool
Default:: true

Specifies whether the previous set options should be overriden when setting options.

Code Sample

 
      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          gridLayout: {
            overrideConfigOnSetOption : true
          }
      });
                 
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var overrideConfigOnSetOption = gridLayout.overrideConfigOnSetOption;

rearrangeItems

Type:: bool
Default:: true

Specified whether the items should rearrange to fit in the container when it is resized.
Have effect only when fixed columnWidth option is set.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
	        layoutMode: "grid",
	        gridLayout: {
		        rearrangeItems: true
          }
      });
                
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var rearrangeItems = gridLayout.rearrangeItems;

rows

Type:: number
Default:: null

Number of rows in the grid.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "grid",
          width: "75%",
          height: "500px",
          gridLayout: {
            rows : 3
          }
      });
           
      //Get
      var gridLayout = $('.selector').igLayoutManager('option', 'gridLayout');
      var rows = gridLayout.rows;

height

Type:: string
Default:: null

Height of the layout container.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          height : "400px"
      });
      
      //Get
      var height = $('.selector').igLayoutManager("option", "height");

itemCount

Type:: number
Default:: null

Number of items to render, this is only applicable to layouts: vertical and flow.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          height : "300px",
          layoutMode: "vertical",
          itemCount: 10
      });
      
      //Get
      var itemCount = $('.selector').igLayoutManager('option', 'itemCount');

items

Type:: array
Default:: []
Elements Type:: object

An array of item descriptions
this assumes the container is empty, and every item
is described by rowspan,colspan, etc. - otherwise values of
1 are assumed
items can have various properties some of which may not be applicable
depending on the layoutMode.
for example rowSpan/colSpan/colIndex/rowIndex are only applicable to gridlayout.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "vertical",
          items: [
            {
              width: "10%",
              height: "150px"
            },
            {
              width: "40%",
              height: "250px"
            },
            {
              width: "40%",
              height: "150px"
            },
            {
              width: "20%",
              height: "150px"
            },
            {
              width: "50%",
              height: "150px"
            }
          ]
      });
      
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');

colIndex

Type:: number
Default:: 0

Column index of the item in the grid.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "grid",
        items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemColIndex = items[0].colIndex;

colSpan

Type:: number
Default:: 1

ColSpan of the item.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "grid",
        items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemColSpan = items[0].colSpan;

height

Type:: string
Default:: null

Individual item height, either in px or percentage.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "vertical",
		items: [
			{
				height: "150px"
			},
			{
				height: "250px"
			},
			{
				height: "150px"
			},
			{
				height: "150px"
			},
			{
				height: "150px"
			}
		]
      });
        
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemHeight = items[0].height;

rowIndex

Type:: number
Default:: 0

Row index of the item in the grid.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "grid",
		items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemRowIndex = items[0].rowIndex;

rowSpan

Type:: number
Default:: 1

RowSpan of the item.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "grid",
        items: [
		  {
			  rowSpan: 2,
			  colSpan: 2,
			  colIndex: 0,
			  rowIndex: 0
		  },
		  {
			  rowSpan: 1,
			  colSpan: 1,
			  rowIndex: 0,
			  colIndex: 1
		  }]
      });
       
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemRowSpan = items[0].rowSpan;

width

Type:: string
Default:: null

Individual item width, either in px or percentage.

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
		layoutMode: "vertical",
		items: [
			{
				width: "10%"
			},
			{
				width: "40%",
			},
			{
				width: "40%",
			},
			{
				width: "20%",
			},
			{
				width: "50%",
			}
		]
      });
      
      //Get
      var items = $('.selector').igLayoutManager('option', 'items');
      var firstItemWidth = items[0].width;

layoutMode

Type:: enumeration
Default:: column

defines the layout type grid border flow column vertical.

Members

grid
Type:object
border
Type:object
flow
Type:object

Code Sample

      //Initialize
      $('.selector').igLayoutManager({
	        layoutMode: "vertical"
      });
           
      //Get
      var layoutMode = $('.selector').igLayoutManager('option', 'layoutMode');

width

Type:: string
Default:: null

Width of the layout container.

Code Sample

 
      //Initialize
      $('.selector').igLayoutManager({
          layoutMode: "border",
          width : "800px"
      });
      
      //Get
      var width = $('.selector').igLayoutManager("option", "width");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

internalResized

Cancellable:: false

Event fired after items are resized.
Use ui.owner to get a reference to the layout manager performing resizing.

Code Sample

      //Initialize
      $(".selector").igLayoutManager({
          internalResized: function(evt, ui) {
          //reference to igLayourManager
          ui.owner;
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanagerinternalresized", function (evt, ui) {
	  // reference to igLayoutManager
	  ui.owner;
      });

internalResizing

Cancellable:: true

Event fired before items are resized.
Use ui.owner to get a reference to the layout manager performing resizing.

Code Sample

      //Initialize
      $(".selector").igLayoutManager({
          internalResizing: function(evt, ui) {
              //reference to igLayourManager
              ui.owner;
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanagerinternalresizing", function (evt, ui) {
		// reference to igLayoutManager
		ui.owner;
      });

itemRendered

Cancellable:: false

Event fired after an item has been rendered in the container
Function takes arguments evt and ui.
Use ui.owner to get reference to the igLayoutManager.
Use ui.itemData to get a reference of item's settings, such as colspan ,rowspan, etc.
Use ui.index to get a reference of the item's index, if the layout is flow or vertical
Use ui.item to get a reference to the rendered item.

Code Sample

      //Initialize
      $(".selector").igLayoutManager({
          itemRendered: function(evt, ui) {
              //reference to rendered item
              ui.item;
              //reference to rendered item index
              ui.index
              //reference to item's settings, such as colspan ,rowspan, etc
              ui.itemData
              //reference to the igLayoutManager
              ui.owner
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanageritemrendered", function (evt, ui) {
          //reference to rendered item
          ui.item;
          //reference to rendered item index
          ui.index
          //reference to item's settings, such as colspan ,rowspan, etc
          ui.itemData
      });

itemRendering

Cancellable:: false

Event fired before an item is rendered in the container
Function takes arguments evt and ui.
Use ui.owner to get reference to the igLayoutManager.
Use ui.itemData to get a reference of item's settings, such as colspan ,rowspan, etc.
Use ui.index to get a reference of the item's index, if the layout is flow or vertical
Use ui.item to get a reference to the rendered item.

Code Sample

      //Initialize
      $(".selector").igLayoutManager({
          itemRendering: function(evt, ui) {
              //reference to rendered item
              ui.item;
              //reference to item index which is goding to be rendered
              ui.index
              //reference to item's settings, such as colspan ,rowspan, etc
              ui.itemData
              //reference to the igLayoutManager
              ui.owner
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanageritemrendering", function (evt, ui) {
          //reference to rendered item
          ui.item;
          //reference to item index which is goding to be rendered
          ui.index
           //reference to item's settings, such as colspan ,rowspan, etc
          ui.itemData
      });

rendered

Cancellable:: false

Event fired after all items are rendered.
Function takes arguments evt and ui.
Use ui.owner to get reference to the igLayoutManager.

Code Sample

      //Initialize
      $(".selector").igLayoutManager({
          rendered: function(evt, ui) {
            //reference to rendered items
            ui.items;
          }
      });
      
      //Bind
      $(document).delegate("#layout", "iglayoutmanagerrendered", function (evt, ui) {
          //reference to rendered items
          ui.items;
      });

Show Details

destroy

.igLayoutManager( "destroy" );
Destroy is part of the jQuery UI widget API and does the following:
1. Remove custom CSS classes that were added.
2. Remove any elements that were added at widget's initialization and after that, which didn't below to the original markup
3. Unbind all events that were bound.
Code Sample
```
  
      $(".selector").igLayoutManager("destroy");
      
```
reflow

.igLayoutManager( "reflow", [forceReflow:object], [animationDuration:number], [event:object] );
Triggers recalculation of the layout dimensions. Layouts may not need to be reflowed manually, if their sizes are in percentages (i.e. they are responsive by default)
this can be particularly useful with a grid layout, when the container has percentage sizes, but items are calculated in pixels and positioned absolutely in the container.
- forceReflow
- Type:object
- Optional
- Indicates whether the reflow should be forced. Useful in cases where the items size and position was changed manually.
- animationDuration
- Type:number
- Optional
- The animation duration to be used for this reflow only. Supported only for Grid Layout mode.
- event
- Type:object
- Optional
- Indicates the browser even which triggered this action (not API).
Code Sample
```
      $(".selector").igLayoutManager("reflow", forceReflow, event);
      
```

ig-layout-border

Classes applied to the container when layout mode is border.
ig-layout-border-center

Classes applied to the center region of a border layout.
ig-layout-border-container

Classes applied to the container element, when mode is border.
ig-layout-border-footer

Classes applied to the footer region of a border layout.
ig-layout-border-header

Classes applied to the header region of a border layout.
ig-layout-border-item

Classes applied to the individual layout item, when layout is of border type.
ig-layout-border-left

Classes applied to the left region of a border layout.
ig-layout-border-right

Classes applied to the right region of a border layout.
ig-layout

Classes applied to the main container element, on which the layout manager widget is instantiated.
ig-layout-flow

Classes applied to the container when layout mode is flow.
ig-layout-flow-item

Classes applied to an item that is part of a flow layout.
ig-layout-griditem-abs

Classes applied to the item elements, when mode is grid and the items are absolutely positioned.
ig-layout-griditem-rel

Classes applied to the item elements, when mode is grid and the items are relatively positioned.
ig-layout-item

Classes applied to an individual layout item.
ig-layout-vertical

Classes applied to the container when layout mode is vertical.
ig-layout-vertical-item

Classes applied to the individual layout item, when layout is vertical.

Ignite UI Home

ui.igLayoutManager

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

borderLayout

Code Sample

leftWidth

Code Sample

rightWidth

Code Sample

showFooter

Code Sample

showHeader

Code Sample

showLeft

Code Sample

showRight

Code Sample

gridLayout

Code Sample

animationDuration

Code Sample

cols

Code Sample

columnHeight

Code Sample

columnWidth

Code Sample

marginLeft

Code Sample

marginTop

Code Sample

overrideConfigOnSetOption

Code Sample

rearrangeItems

Code Sample

rows

Code Sample

height

Code Sample

itemCount

Code Sample

items

Code Sample

colIndex

Code Sample

colSpan

Code Sample

height

Code Sample

rowIndex

Code Sample

rowSpan

Code Sample

width

Code Sample

layoutMode

Members

Code Sample

width

Code Sample

internalResized

Code Sample

internalResizing

Code Sample

itemRendered

Code Sample

itemRendering

Code Sample

rendered

Code Sample

destroy

Code Sample

reflow

Code Sample

ig-layout-border

ig-layout-border-center