Ext.data.JsonP.Ext_layout_container_Table({"mixins":[],"code_type":"ext_define","inheritable":false,"component":false,"meta":{},"mixedInto":[],"uses":[],"aliases":{"layout":["table"]},"parentMixins":["Ext.util.ElementContainer"],"superclasses":["Ext.Base","Ext.layout.Layout","Ext.layout.container.Container"],"members":{"event":[],"property":[{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"$className","id":"property-S-className"},{"meta":{"private":true},"owner":"Ext.layout.container.Container","tagname":"property","name":"animatePolicy","id":"property-animatePolicy"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"configMap","id":"property-configMap"},{"meta":{},"owner":"Ext.layout.Layout","tagname":"property","name":"done","id":"property-done"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"property","name":"getScrollRangeFlags","id":"property-getScrollRangeFlags"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"initConfigList","id":"property-initConfigList"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"initConfigMap","id":"property-initConfigMap"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"property","name":"isInstance","id":"property-isInstance"},{"meta":{},"owner":"Ext.layout.Layout","tagname":"property","name":"isLayout","id":"property-isLayout"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"property","name":"overflowPadderEl","id":"property-overflowPadderEl"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"property","name":"self","id":"property-self"}],"css_var":[],"method":[{"meta":{},"owner":"Ext.util.ElementContainer","tagname":"method","name":"addChildEls","id":"method-addChildEls"},{"meta":{"protected":true},"owner":"Ext.layout.Layout","tagname":"method","name":"afterRemove","id":"method-afterRemove"},{"meta":{"private":true},"owner":"Ext.util.ElementContainer","tagname":"method","name":"applyChildEls","id":"method-applyChildEls"},{"meta":{"private":true},"owner":"Ext.layout.container.Container","tagname":"method","name":"beginCollapse","id":"method-beginCollapse"},{"meta":{"private":true},"owner":"Ext.layout.container.Container","tagname":"method","name":"beginExpand","id":"method-beginExpand"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"method","name":"beginLayout","id":"method-beginLayout"},{"meta":{},"owner":"Ext.layout.Layout","tagname":"method","name":"beginLayoutCycle","id":"method-beginLayoutCycle"},{"meta":{"abstract":true},"owner":"Ext.layout.Layout","tagname":"method","name":"calculate","id":"method-calculate"},{"meta":{"private":true},"owner":"Ext.layout.container.Table","tagname":"method","name":"calculateCells","id":"method-calculateCells"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"method","name":"calculateOverflow","id":"method-calculateOverflow"},{"meta":{"deprecated":{"text":"as of 4.1. Use {@link #callParent} instead."},"protected":true},"owner":"Ext.Base","tagname":"method","name":"callOverridden","id":"method-callOverridden"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"method","name":"callParent","id":"method-callParent"},{"meta":{},"owner":"Ext.layout.Layout","tagname":"method","name":"completeLayout","id":"method-completeLayout"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"configClass","id":"method-configClass"},{"meta":{"protected":true},"owner":"Ext.layout.container.Container","tagname":"method","name":"configureItem","id":"method-configureItem"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"destroy","id":"method-destroy"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"method","name":"doRenderPadder","id":"method-doRenderPadder"},{"meta":{},"owner":"Ext.layout.Layout","tagname":"method","name":"finalizeLayout","id":"method-finalizeLayout"},{"meta":{},"owner":"Ext.layout.Layout","tagname":"method","name":"finishedLayout","id":"method-finishedLayout"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"getConfig","id":"method-getConfig"},{"meta":{"protected":true},"owner":"Ext.layout.container.Container","tagname":"method","name":"getContainerSize","id":"method-getContainerSize"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"method","name":"getElementTarget","id":"method-getElementTarget"},{"meta":{},"owner":"Ext.Base","tagname":"method","name":"getInitialConfig","id":"method-getInitialConfig"},{"meta":{"protected":true},"owner":"Ext.layout.Layout","tagname":"method","name":"getItemSizePolicy","id":"method-getItemSizePolicy"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"method","name":"getLayoutItems","id":"method-getLayoutItems"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"method","name":"getRenderTarget","id":"method-getRenderTarget"},{"meta":{"protected":true},"owner":"Ext.layout.container.Container","tagname":"method","name":"getRenderedItems","id":"method-getRenderedItems"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"method","name":"getTarget","id":"method-getTarget"},{"meta":{"protected":true},"owner":"Ext.layout.container.Container","tagname":"method","name":"getVisibleItems","id":"method-getVisibleItems"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"hasConfig","id":"method-hasConfig"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"method","name":"initConfig","id":"method-initConfig"},{"meta":{"protected":true},"owner":"Ext.layout.Layout","tagname":"method","name":"initLayout","id":"method-initLayout"},{"meta":{"protected":true},"owner":"Ext.layout.Layout","tagname":"method","name":"isValidParent","id":"method-isValidParent"},{"meta":{"private":true},"owner":"Ext.layout.Layout","tagname":"method","name":"moveItem","id":"method-moveItem"},{"meta":{"private":true},"owner":"Ext.layout.container.Table","tagname":"method","name":"needsDivWrap","id":"method-needsDivWrap"},{"meta":{"private":true},"owner":"Ext.layout.container.Container","tagname":"method","name":"notifyOwner","id":"method-notifyOwner"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"onConfigUpdate","id":"method-onConfigUpdate"},{"meta":{},"owner":"Ext.layout.Layout","tagname":"method","name":"onContentChange","id":"method-onContentChange"},{"meta":{},"owner":"Ext.util.ElementContainer","tagname":"method","name":"removeChildEls","id":"method-removeChildEls"},{"meta":{"private":true},"owner":"Ext.layout.container.Table","tagname":"method","name":"renderChildren","id":"method-renderChildren"},{"meta":{"private":true},"owner":"Ext.layout.Layout","tagname":"method","name":"renderItem","id":"method-renderItem"},{"meta":{"protected":true},"owner":"Ext.layout.Layout","tagname":"method","name":"renderItems","id":"method-renderItems"},{"meta":{"private":true},"owner":"Ext.Base","tagname":"method","name":"setConfig","id":"method-setConfig"},{"meta":{"protected":true},"owner":"Ext.Base","tagname":"method","name":"statics","id":"method-statics"}],"css_mixin":[],"cfg":[{"meta":{},"owner":"Ext.layout.container.Table","tagname":"cfg","name":"columns","id":"cfg-columns"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"cfg","name":"itemCls","id":"cfg-itemCls"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"cfg","name":"manageOverflow","id":"cfg-manageOverflow"},{"meta":{},"owner":"Ext.layout.container.Container","tagname":"cfg","name":"reserveScrollbar","id":"cfg-reserveScrollbar"},{"meta":{},"owner":"Ext.layout.container.Table","tagname":"cfg","name":"tableAttrs","id":"cfg-tableAttrs"},{"meta":{},"owner":"Ext.layout.container.Table","tagname":"cfg","name":"tdAttrs","id":"cfg-tdAttrs"},{"meta":{},"owner":"Ext.layout.container.Table","tagname":"cfg","name":"trAttrs","id":"cfg-trAttrs"}]},"tagname":"class","extends":"Ext.layout.container.Container","html":"
Alternate names
Ext.layout.TableLayoutHierarchy
Ext.BaseExt.layout.LayoutExt.layout.container.ContainerExt.layout.container.TableInherited mixins
Files
This layout allows you to easily render content into an HTML table. The total number of columns can be specified, and\nrowspan and colspan can be used to create complex layouts within the table. This class is intended to be extended or\ncreated via the layout: {type: 'table'}
Ext.container.Container.layout config, and should generally not\nneed to be created directly via the new keyword.
Note that when creating a layout via config, the layout-specific config properties must be passed in via the Ext.container.Container.layout object which will then be applied internally to the layout. In the case of\nTableLayout, the only valid layout config properties are columns and tableAttrs. However, the items\nadded to a TableLayout can supply the following table-specific config properties:
\n\nThe basic concept of building up a TableLayout is conceptually very similar to building up a standard HTML table. You\nsimply add each panel (or \"cell\") that you want to include along with any span attributes specified as the special\nconfig properties of rowspan and colspan which work exactly like their HTML counterparts. Rather than explicitly\ncreating and nesting rows and columns as you would in HTML, you simply specify the total column count in the\nlayout config and start adding panels in their natural order from left to right, top to bottom. The layout will\nautomatically figure out, based on the column count, rowspans and colspans, how to position each panel within the\ntable. Just like with HTML tables, your rowspans and colspans must add up correctly in your overall layout or you'll\nend up with missing and/or extra cells! Example usage:
\n\nExt.create('Ext.panel.Panel', {\n title: 'Table Layout',\n width: 300,\n height: 150,\n layout: {\n type: 'table',\n // The total column count must be specified here\n columns: 3\n },\n defaults: {\n // applied to each contained panel\n bodyStyle: 'padding:20px'\n },\n items: [{\n html: 'Cell A content',\n rowspan: 2\n },{\n html: 'Cell B content',\n colspan: 2\n },{\n html: 'Cell C content',\n cellCls: 'highlight'\n },{\n html: 'Cell D content'\n }],\n renderTo: Ext.getBody()\n});\n
\nThe total number of columns to create in the table for this layout. If not specified, all Components added to\nthis layout will be rendered into a single row using one column per Component.
\nAn optional extra CSS class that will be added to the container. This can be useful for\nadding customized styles to the container or any of its children using standard CSS\nrules. See Ext.Component.componentCls also.
\nOne of the following values:
\n\nDefaults to: 0
Set to true
to leave space for a vertical scrollbar (if the OS shows space-consuming scrollbars) regardless\nof whether a scrollbar is needed.
This is useful if content height changes during application usage, but you do not want the calculated width\nof child items to change when a scrollbar appears or disappears. The scrollbar will appear in the reserved space,\nand the calculated width of child Components will not change.
\n\nExt.define('Employee', {\n extend: 'Ext.data.Model',\n fields: [\n {name: 'rating', type: 'int'},\n {name: 'salary', type: 'float'},\n {name: 'name'}\n ]\n});\n\nfunction createFakeData(count) {\n var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],\n lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],\n ratings = [1, 2, 3, 4, 5],\n salaries = [100, 400, 900, 1500, 1000000];\n\n var data = [];\n for (var i = 0; i < (count || 25); i++) {\n var ratingId = Math.floor(Math.random() * ratings.length),\n salaryId = Math.floor(Math.random() * salaries.length),\n firstNameId = Math.floor(Math.random() * firstNames.length),\n lastNameId = Math.floor(Math.random() * lastNames.length),\n\n rating = ratings[ratingId],\n salary = salaries[salaryId],\n name = Ext.String.format(\"{0} {1}\", firstNames[firstNameId], lastNames[lastNameId]);\n\n data.push({\n rating: rating,\n salary: salary,\n name: name\n });\n }\n store.loadData(data);\n}\n\n// create the Data Store\nvar store = Ext.create('Ext.data.Store', {\n id: 'store',\n model: 'Employee',\n proxy: {\n type: 'memory'\n }\n});\ncreateFakeData(10);\n\nvar grid = Ext.create('Ext.grid.Panel', {\n title: 'Grid loaded with varying number of records',\n anchor: '100%',\n store: store,\n columns: [{\n xtype: 'rownumberer',\n width: 40,\n sortable: false\n },{\n text: 'Name',\n flex: 1,\n sortable: true,\n dataIndex: 'name'\n },{\n text: 'Rating',\n width: 125,\n sortable: true,\n dataIndex: 'rating'\n },{\n text: 'Salary',\n width: 125,\n sortable: true,\n dataIndex: 'salary',\n align: 'right',\n renderer: Ext.util.Format.usMoney\n }]\n});\n\nExt.create('Ext.panel.Panel', {\n renderTo: document.body,\n width: 800,\n height: 600,\n layout: {\n type: 'anchor',\n reserveScrollbar: true // There will be a gap even when there's no scrollbar\n },\n autoScroll: true,\n items: grid,\n tbar: {\n defaults: {\n handler: function(b) {\n createFakeData(b.count);\n }\n },\n items: [{\n text: '10 Items',\n count: 10\n },{\n text: '100 Items',\n count: 100\n },{\n text: '300 Items',\n count: 300\n },{\n text: '1000 Items',\n count: 1000\n },{\n text: '5000 Items',\n count: 5000\n }]\n }\n});\n
\nDefaults to: false
An object containing properties which are added to the DomHelper specification used to\ncreate the layout's <table>
element. Example:
{\n xtype: 'panel',\n layout: {\n type: 'table',\n columns: 3,\n tableAttrs: {\n style: {\n width: '100%'\n }\n }\n }\n}\n
\nDefaults to: null
An object containing properties which are added to the DomHelper specification used to\ncreate the layout's <td>
elements.
An object which contains boolean properties specifying which properties are to be\nanimated upon flush of child Component ContextItems. For example, Accordion would\nhave:
\n\n {\n y: true,\n height: true\n }\n
\nDefaults to: null
Used only during a layout run, this value indicates that a\nlayout has finished its calculations. This flag is set to true prior to the call to\ncalculate and should be set to false if this layout has more work to do.
\nReturns flags indicating cross-browser handling of scrollHeight/Width. In particular,\nIE has issues with padding-bottom in a scrolling element (it does not include that\npadding in the scrollHeight). Also, margin-bottom on a child in a scrolling element\ncan be lost.
\n\nAll browsers seem to ignore margin-right on children and padding-right on the parent\nelement (the one with the overflow)
\n\nThis method returns a number with the follow bit positions set based on things not\naccounted for in scrollHeight and scrollWidth:
\n\nTo work around the margin-bottom issue, it is sufficient to create a 0px tall last\nchild that will \"hide\" the margin. This can also be handled by wrapping the children\nin an element, again \"hiding\" the margin. Wrapping the elements is about the only\nway to preserve their right margins. This is the strategy used by Column layout.
\n\nTo work around the padding-bottom problem, since it is comes from a style on the\nparent element, about the only simple fix is to create a last child with height\nequal to padding-bottom. To preserve the right padding, the sizing element needs to\nhave a width that includes the right padding.
\ntrue
in this class to identify an object as an instantiated Layout, or subclass thereof.
Defaults to: true
The element used to correct body padding during overflow.
\nThe element used to correct body padding during overflow.
\nGet the reference to the current class from which this object was instantiated. Unlike statics,\nthis.self
is scope-dependent and it's meant to be used for dynamic inheritance. See statics\nfor a detailed comparison
Ext.define('My.Cat', {\n statics: {\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n alert(this.self.speciesName); // dependent on 'this'\n },\n\n clone: function() {\n return new this.self();\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat'\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\n
\nAdds each argument passed to this method to the childEls array.
\nRemoves layout's itemCls and owning Container's itemCls.\nClears the managed dimensions flags
\nCalled by an owning Panel before the Panel begins its collapse process.\nMost layouts will not need to override the default Ext.emptyFn implementation.
\nCalled by an owning Panel before the Panel begins its expand process.\nMost layouts will not need to override the default Ext.emptyFn implementation.
\nIn addition to work done by our base classes, containers benefit from some extra\ncached data. The following properties are added to the ownerContext:
\n\nOverrides: Ext.layout.Layout.beginLayout
Called before any calculation cycles to reset DOM values and prepare for calculation.
\n\nThis is a write phase and DOM reads should be strictly avoided when overridding\nthis method.
\nThe context item for the layout's owner\ncomponent.
\nCalled to perform the calculations for this layout. This method will be called at\nleast once and may be called repeatedly if the done property is cleared\nbefore return to indicate that this layout is not yet done. The done property\nis always set to true
before entering this method.
This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to Ext.layout.ContextItem objects to\n be flushed at the next opportunity.
\nThe context item for the layout's owner\ncomponent.
\nHandles overflow processing for a container. This should be called once the layout\nhas determined contentWidth/Height. In addition to the ownerContext passed to the\ncalculate method, this method also needs the containerSize (the object\nreturned by getContainerSize).
\nA bit mask for the overflow managed dimensions. The 0-bit\nis for width
and the 1-bit is for height
. In other words, a value of 1 would be\nonly width
, 2 would be only height
and 3 would be both.
Call the original method that was previously overridden with override
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\n
\n This method has been deprecated
\nas of 4.1. Use callParent instead.
\n\nThe arguments, either an array or the arguments
object\nfrom the current method, for example: this.callOverridden(arguments)
Returns the result of calling the overridden method
\nCall the \"parent\" method of the current method. That is the method previously\noverridden by derivation or by an override (see Ext.define).
\n\n Ext.define('My.Base', {\n constructor: function (x) {\n this.x = x;\n },\n\n statics: {\n method: function (x) {\n return x;\n }\n }\n });\n\n Ext.define('My.Derived', {\n extend: 'My.Base',\n\n constructor: function () {\n this.callParent([21]);\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // alerts 21\n
\n\nThis can be used with an override as follows:
\n\n Ext.define('My.DerivedOverride', {\n override: 'My.Derived',\n\n constructor: function (x) {\n this.callParent([x*2]); // calls original My.Derived constructor\n }\n });\n\n var obj = new My.Derived();\n\n alert(obj.x); // now alerts 42\n
\n\nThis also works with static methods.
\n\n Ext.define('My.Derived2', {\n extend: 'My.Base',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Base.method\n }\n }\n });\n\n alert(My.Base.method(10); // alerts 10\n alert(My.Derived2.method(10); // alerts 20\n
\n\nLastly, it also works with overridden static methods.
\n\n Ext.define('My.Derived2Override', {\n override: 'My.Derived2',\n\n statics: {\n method: function (x) {\n return this.callParent([x*2]); // calls My.Derived2.method\n }\n }\n });\n\n alert(My.Derived2.method(10); // now alerts 40\n
\nThe arguments, either an array or the arguments
object\nfrom the current method, for example: this.callParent(arguments)
Returns the result of calling the parent method
\nThis method (if implemented) is called at the end of the cycle in which this layout\ncompletes (by not setting done to false
in calculate). It is\npossible for the layout to complete and yet become invalid before the end of the cycle,\nin which case, this method will not be called. It is also possible for this method to\nbe called and then later the layout becomes invalidated. This will result in\ncalculate being called again, followed by another call to this method.
This is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to Ext.layout.ContextItem objects to\nbe flushed at the next opportunity.
\n\nThis method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.
\nThe context item for the layout's owner\ncomponent.
\nAdds layout's itemCls and owning Container's itemCls
\nOverrides: Ext.layout.Layout.configureItem
Creates an element that makes bottom/right body padding consistent across browsers.\nThis element is sized based on the need for scrollbars in calculateOverflow.\nIf the manageOverflow option is false, this element is not created.
\n\nSee getScrollRangeFlags for more details.
\nThis method (if implemented) is called after all layouts have completed. In most\nways this is similar to completeLayout. This call can cause this (or any\nlayout) to be become invalid (see Ext.layout.Context.invalidate), but this\nis best avoided. This method is intended to be where final reads are made and so it\nis best to avoid invalidating layouts at this point whenever possible. Even so, this\nmethod can be used to perform final checks that may require all other layouts to be\ncomplete and then invalidate some results.
\n\nThis is a read phase and DOM writes should be strictly avoided in derived classes.\nInstead, DOM writes need to be written to Ext.layout.ContextItem objects to\nbe flushed at the next opportunity.
\n\nThis method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.
\nThe context item for the layout's owner\ncomponent.
\nThis method is called after all layouts are complete and their calculations flushed\nto the DOM. No further layouts will be run and this method is only called once per\nlayout run. The base component layout caches lastComponentSize
.
This is a write phase and DOM reads should be avoided if possible when overridding\nthis method.
\n\nThis method need not be implemented by derived classes and, in fact, should only be\nimplemented when needed.
\nThe context item for the layout's owner\ncomponent.
\nReturns the container size (that of the target). Only the fixed-sized dimensions can\nbe returned because the shrinkWrap dimensions are based on the contentWidth/Height\nas determined by the container layout.
\n\nIf the calculateOverflow method is used and if manageOverflow is\ntrue, this may adjust the width/height by the size of scrollbars.
\nThe owner's context item.
\nTrue if the container size must be in the DOM.
\nDefaults to: false
Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element.
\n\nMay be overridden in Component layout managers which implement a component render target which must only\ncontain child components.
\nReturns an object describing how this layout manages the size of the given component.\nThis method must be implemented by any layout that manages components.
\nAn object describing the sizing done by the layout for this item or\nnull if the layout mimics the size policy of its ownerCt (e.g., 'fit' and 'card').
\nTrue if the natural/auto width of this component\nis used by the ownerLayout.
\nTrue if the natural/auto height of this component\nis used by the ownerLayout.
\nTrue if the ownerLayout set this component's width.
\nTrue if the ownerLayout set this component's height.
\nReturns an array of child components either for a render phase (Performed in the beforeLayout\nmethod of the layout's base class), or the layout phase (onLayout).
\nof child components
\nOverrides: Ext.layout.Layout.getLayoutItems
Returns the element into which rendering must take place. Defaults to the owner Container's\ntarget element.
\n\nMay be overridden in layout managers which implement an inner element.
\nInitialize configuration for this class. a typical example:
\n\nExt.define('My.awesome.Class', {\n // The default config\n config: {\n name: 'Awesome',\n isAwesome: true\n },\n\n constructor: function(config) {\n this.initConfig(config);\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\n
\nthis
\nA one-time initialization method called just before rendering.
\nOpera 10.5 has a bug where if a table cell's child has box-sizing:border-box and padding, it\nwill include that padding in the size of the cell, making it always larger than the\nshrink-wrapped size of its contents. To get around this we have to wrap the contents in a div\nand then set that div's width to match the item rendered within it afterLayout. This method\ndetermines whether we need the wrapper div; it currently does a straight UA sniff as this bug\nseems isolated to just Opera 10.5, but feature detection could be added here if needed.
\nCalled for every layout in the layout context after all the layouts have been finally flushed
\nOverrides: Ext.layout.Layout.notifyOwner
This method is called when a child item changes in some way. By default this calls\nExt.AbstractComponent.updateLayout on this layout's owner.
\nThe child item that has changed.
\nTrue if this layout has handled the content change.
\nRemoves items in the childEls array based on the return value of a supplied test\nfunction. The function is called with a entry in childEls and if the test function\nreturn true, that entry is removed. If false, that entry is kept.
\nThe test function.
\nIterates over all passed items, ensuring they are rendered in a cell in the proper\nlocation in the table structure.
\nRenders the given Component into the target Element.
\nThe Component to render
\nThe target Element
\nThe position within the target to render the item to
\nGet the reference to the class from which this object was instantiated. Note that unlike self,\nthis.statics()
is scope-independent and it always returns the class from which it was called, regardless of what\nthis
points to during run-time
Ext.define('My.Cat', {\n statics: {\n totalCreated: 0,\n speciesName: 'Cat' // My.Cat.speciesName = 'Cat'\n },\n\n constructor: function() {\n var statics = this.statics();\n\n alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to\n // equivalent to: My.Cat.speciesName\n\n alert(this.self.speciesName); // dependent on 'this'\n\n statics.totalCreated++;\n },\n\n clone: function() {\n var cloned = new this.self; // dependent on 'this'\n\n cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName\n\n return cloned;\n }\n});\n\n\nExt.define('My.SnowLeopard', {\n extend: 'My.Cat',\n\n statics: {\n speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'\n },\n\n constructor: function() {\n this.callParent();\n }\n});\n\nvar cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'\n\nvar snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'\n\nvar clone = snowLeopard.clone();\nalert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'\nalert(clone.groupName); // alerts 'Cat'\n\nalert(My.Cat.totalCreated); // alerts 3\n
\nAdd methods / properties to the prototype of this class.
\n\nExt.define('My.awesome.Cat', {\n constructor: function() {\n ...\n }\n});\n\n My.awesome.Cat.addMembers({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\n
\nAdd / override static properties of this class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.addStatics({\n someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'\n method1: function() { ... }, // My.cool.Class.method1 = function() { ... };\n method2: function() { ... } // My.cool.Class.method2 = function() { ... };\n});\n
\nthis
\nBorrow another class' members to the prototype of this class.
\n\nExt.define('Bank', {\n money: '$$$',\n printMoney: function() {\n alert('$$$$$$$');\n }\n});\n\nExt.define('Thief', {\n ...\n});\n\nThief.borrow(Bank, ['money', 'printMoney']);\n\nvar steve = new Thief();\n\nalert(steve.money); // alerts '$$$'\nsteve.printMoney(); // alerts '$$$$$$$'\n
\nThe class to borrow members from
\nThe names of the members to borrow
\nthis
\nCreate a new instance of this Class.
\n\nExt.define('My.cool.Class', {\n ...\n});\n\nMy.cool.Class.create({\n someConfig: true\n});\n
\n\nAll parameters are passed to the constructor of the class.
\nthe created instance.
\nCreate aliases for existing prototype methods. Example:
\n\nExt.define('My.cool.Class', {\n method1: function() { ... },\n method2: function() { ... }\n});\n\nvar test = new My.cool.Class();\n\nMy.cool.Class.createAlias({\n method3: 'method1',\n method4: 'method2'\n});\n\ntest.method3(); // test.method1()\n\nMy.cool.Class.createAlias('method5', 'method3');\n\ntest.method5(); // test.method3() -> test.method1()\n
\nThe new method name, or an object to set multiple aliases. See\nflexSetter
\nThe original method name
\nGet the current class' name in string format.
\n\nExt.define('My.cool.Class', {\n constructor: function() {\n alert(this.self.getName()); // alerts 'My.cool.Class'\n }\n});\n\nMy.cool.Class.getName(); // 'My.cool.Class'\n
\nclassName
\nAdds members to class.
\nThis method has been deprecated since 4.1
\nUse addMembers instead.
\n\nOverride members of this class. Overridden methods can be invoked via\ncallParent.
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\n\nvar kitty = new My.Cat(); // alerts \"I'm going to be a cat!\"\n // alerts \"I'm a cat!\"\n // alerts \"Meeeeoooowwww\"\n
\n\nAs of 4.1, direct use of this method is deprecated. Use Ext.define\ninstead:
\n\nExt.define('My.CatOverride', {\n override: 'My.Cat',\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n this.callParent(arguments);\n\n alert(\"Meeeeoooowwww\");\n }\n});\n
\n\nThe above accomplishes the same result but can be managed by the Ext.Loader\nwhich can properly order the override and its target class and the build process\ncan determine whether the override is needed based on the required state of the\ntarget class (My.Cat).
\nThis method has been deprecated since 4.1.0
\nUse Ext.define instead
\n\nThe properties to add to this class. This should be\nspecified as an object literal containing one or more properties.
\nthis class
\n