Clear Up
SharpKit Reference

Container Class

This class is intended to be extended or created via the layout configuration property. See Ext.container.Container.layout for additional details.

Namespace: Ext.layout.container

Base Interfaces


Name Description
addChildEls() Adds each argument passed to this method to the childEls array.
applyChildEls(object, object) Sets references to elements inside the component.
calculateOverflow(ContextItem, object, JsNumber) Handles overflow processing for a container. This should be called once the layout has determined contentWidth/Height. In addition to the ownerContext passed to the calculate method, this method also needs the containerSize (the object returned by getContainerSize).
doRenderPadder(object, object) Creates an element that makes bottom/right body padding consistent across browsers. This element is sized based on the need for scrollbars in calculateOverflow. If the manageOverflow option is false, this element is not created. See getScrollRangeFlags for more details.
getContainerSize(ContextItem, object) Returns the container size (that of the target). Only the fixed-sized dimensions can be returned because the shrinkWrap dimensions are based on the contentWidth/Height as determined by the container layout. If the calculateOverflow method is used and if manageOverflow is true, this may adjust the width/height by the size of scrollbars.
getElementTarget() Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element. May be overridden in Component layout managers which implement a component render target which must only contain child components.
getRenderedItems() Returns all items that are rendered
getRenderTarget() Returns the element into which rendering must take place. Defaults to the owner Container's target element. May be overridden in layout managers which implement an inner element.
getTarget() Returns the owner component's resize element.
getVisibleItems() Returns all items that are both rendered and visible
removeChildEls(Delegate) Removes items in the childEls array based on the return value of a supplied test function. The function is called with a entry in childEls and if the test function return true, that entry is removed. If false, that entry is kept.


Name Description
getScrollRangeFlags Returns flags indicating cross-browser handling of scrollHeight/Width. In particular, IE has issues with padding-bottom in a scrolling element (it does not include that padding in the scrollHeight). Also, margin-bottom on a child in a scrolling element can be lost. All browsers seem to ignore margin-right on children and padding-right on the parent element (the one with the overflow) This method returns a number with the follow bit positions set based on things not accounted for in scrollHeight and scrollWidth:
  • 1: Scrolling element's padding-bottom is not included in scrollHeight.
  • 2: Last child's margin-bottom is not included in scrollHeight.
  • 4: Scrolling element's padding-right is not included in scrollWidth.
  • 8: Child's margin-right is not included in scrollWidth.
  • To work around the margin-bottom issue, it is sufficient to create a 0px tall last child that will "hide" the margin. This can also be handled by wrapping the children in an element, again "hiding" the margin. Wrapping the elements is about the only way to preserve their right margins. This is the strategy used by Column layout. To work around the padding-bottom problem, since it is comes from a style on the parent element, about the only simple fix is to create a last child with height equal to padding-bottom. To preserve the right padding, the sizing element needs to have a width that includes the right padding.
    overflowPadderEl The element used to correct body padding during overflow.


    Name Description
    itemCls An optional extra CSS class that will be added to the container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules. See Ext.Component.componentCls also.
    manageOverflow One of the following values:
  • 0 if the layout should ignore overflow.
  • 1 if the layout should be rerun if scrollbars are needed.
  • 2 if the layout should also correct padding when overflowed.
  • Defaults to: 0
    reserveScrollbar Set to true to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless of whether a scrollbar is needed. This is useful if content height changes during application usage, but you do not want the calculated width of child items to change when a scrollbar appears or disappears. The scrollbar will appear in the reserved space, and the calculated width of child Components will not change.
      Ext.define('Employee', {
                extend: '',
                fields: [
                {name: 'rating', type: 'int'},
                {name: 'salary', type: 'float'},
                {name: 'name'}
                function createFakeData(count) {
                var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
                lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
                ratings      = [1, 2, 3, 4, 5],
                salaries     = [100, 400, 900, 1500, 1000000];
                var data = [];
                for (var i = 0; i < (count || 25); i++) {
                var ratingId    = Math.floor(Math.random() * ratings.length),
                salaryId    = Math.floor(Math.random() * salaries.length),
                firstNameId = Math.floor(Math.random() * firstNames.length),
                lastNameId  = Math.floor(Math.random() * lastNames.length),
                rating      = ratings[ratingId],
                salary      = salaries[salaryId],
                name        = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
                rating: rating,
                salary: salary,
                name: name
                // create the Data Store
                var store = Ext.create('', {
                id: 'store',
                model: 'Employee',
                proxy: {
                type: 'memory'
                var grid = Ext.create('Ext.grid.Panel', {
                title: 'Grid loaded with varying number of records',
                anchor: '100%',
                store: store,
                columns: [{
                xtype: 'rownumberer',
                width: 40,
                sortable: false
                text: 'Name',
                flex: 1,
                sortable: true,
                dataIndex: 'name'
                text: 'Rating',
                width: 125,
                sortable: true,
                dataIndex: 'rating'
                text: 'Salary',
                width: 125,
                sortable: true,
                dataIndex: 'salary',
                align: 'right',
                renderer: Ext.util.Format.usMoney
                Ext.create('Ext.panel.Panel', {
                renderTo: document.body,
                width: 800,
                height: 600,
                layout: {
                type: 'anchor',
                reserveScrollbar: true // There will be a gap even when there's no scrollbar
                autoScroll: true,
                items: grid,
                tbar: {
                defaults: {
                handler: function(b) {
                items: [{
                text: '10 Items',
                count: 10
                text: '100 Items',
                count: 100
                text: '300 Items',
                count: 300
                text: '1000 Items',
                count: 1000
                text: '5000 Items',
                count: 5000
    Defaults to: false
    © Copyright 2005-2011 SharpKit. All rights reserved.