![\"Ext.layout.container.Table](\"doc-resources/Ext.layout.container.Table/Ext.layout.container.Table.png\")
Flag to notify the ownerCt Component on afterLayout of a change
\n", - "linenr": 17, - "html_filename": "AbstractContainer.html" - }, - { - "type": "Boolean", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-cfg-bindToOwnerCtContainer", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "name": "bindToOwnerCtContainer", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "Flag to notify the ownerCt Container on afterLayout of a change
\n", - "linenr": 23, - "html_filename": "AbstractContainer.html" - }, - { - "type": "Number", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "Table2.html#Ext-layout-container-Table-cfg-columns", - "shortDoc": "The total number of columns to create in the table for this layout. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Table.js", - "private": false, - "name": "columns", - "owner": "Ext.layout.container.Table", - "doc": "The 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.
\n", - "linenr": 75, - "html_filename": "Table2.html" - }, - { - "type": "String", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-cfg-itemCls", - "shortDoc": "An optional extra CSS class that will be added to the container. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "name": "itemCls", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "An optional extra CSS class that will be added to the container. This can be useful for adding\ncustomized styles to the container or any of its children using standard CSS rules. See\nExt.Component.ctCls also.
\n\n\n\n", - "linenr": 29, - "html_filename": "AbstractContainer.html" - }, - { - "type": "Object", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "Table2.html#Ext-layout-container-Table-cfg-tableAttrs", - "shortDoc": "An object containing properties which are added to the DomHelper specification\nused to create the layout's <table&...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Table.js", - "private": false, - "name": "tableAttrs", - "owner": "Ext.layout.container.Table", - "doc": "An object containing properties which are added to the DomHelper specification\nused to create the layout's <table> element. Example:
\n\n\n{\n xtype: 'panel',\n layout: {\n type: 'table',\n columns: 3,\n tableAttrs: {\n style: {\n width: '100%'\n }\n }\n }\n}An object containing properties which are added to the DomHelper specification\nused to create the layout's <td> elements.\n\n", - "linenr": 121, - "html_filename": "Table2.html" - }, - { - "type": "Object", - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "cfg", - "href": "Table2.html#Ext-layout-container-Table-cfg-trAttrs", - "shortDoc": "An object containing properties which are added to the DomHelper specification\nused to create the layout's <tr>...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Table.js", - "private": false, - "name": "trAttrs", - "owner": "Ext.layout.container.Table", - "doc": "
An object containing properties which are added to the DomHelper specification\nused to create the layout's <tr> elements.\n\n", - "linenr": 115, - "html_filename": "Table2.html" - } - ], - "method": [ - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getLayoutItems", - "shortDoc": "Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\n...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "params": [ - - ], - "name": "getLayoutItems", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "
Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\nbase class), or the layout phase (onLayout).
\n\n", - "linenr": 49, - "return": { - "type": "Array", - "doc": "of child components
\n" - }, - "html_filename": "AbstractContainer.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getRenderTarget", - "shortDoc": "Returns the element into which rendering must take place. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "params": [ - - ], - "name": "getRenderTarget", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "Returns the element into which rendering must take place. Defaults to the owner Container's Ext.AbstractComponent.targetEl.
\n\n\nMay be overridden in layout managers which implement an inner element.
\n", - "linenr": 68, - "return": { - "type": "Ext.core.Element", - "doc": "\n" - }, - "html_filename": "AbstractContainer.html" - }, - { - "deprecated": null, - "alias": null, - "protected": true, - "tagname": "method", - "href": "Container.html#Ext-layout-container-Container-method-getRenderedItems", - "shortDoc": "Returns all items that are rendered ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Container.js", - "private": false, - "params": [ - - ], - "name": "getRenderedItems", - "owner": "Ext.layout.container.Container", - "doc": "Returns all items that are rendered
\n", - "linenr": 53, - "return": { - "type": "Array", - "doc": "All matching items
\n" - }, - "html_filename": "Container.html" - }, - { - "deprecated": null, - "alias": null, - "protected": false, - "tagname": "method", - "href": "AbstractContainer.html#Ext-layout-container-AbstractContainer-method-getTarget", - "shortDoc": "Returns the owner component's resize element. ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/platform/src/layout/container/AbstractContainer.js", - "private": false, - "params": [ - - ], - "name": "getTarget", - "owner": "Ext.layout.container.AbstractContainer", - "doc": "Returns the owner component's resize element.
\n", - "linenr": 61, - "return": { - "type": "Ext.core.Element", - "doc": "\n" - }, - "html_filename": "AbstractContainer.html" - }, - { - "deprecated": null, - "alias": null, - "protected": true, - "tagname": "method", - "href": "Container.html#Ext-layout-container-Container-method-getVisibleItems", - "shortDoc": "Returns all items that are both rendered and visible ...", - "static": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Container.js", - "private": false, - "params": [ - - ], - "name": "getVisibleItems", - "owner": "Ext.layout.container.Container", - "doc": "Returns all items that are both rendered and visible
\n", - "linenr": 76, - "return": { - "type": "Array", - "doc": "All matching items
\n" - }, - "html_filename": "Container.html" - } - ], - "property": [ - - ], - "cssVar": [ - - ], - "cssMixin": [ - - ], - "event": [ - - ] - }, - "singleton": false, - "alias": null, - "superclasses": [ - "Ext.layout.Layout", - "Ext.layout.container.AbstractContainer", - "Ext.layout.container.Container", - "Ext.layout.container.Auto" - ], - "protected": false, - "tagname": "class", - "mixins": [ - - ], - "href": "Table2.html#Ext-layout-container-Table", - "subclasses": [ - - ], - "static": false, - "author": null, - "component": false, - "filename": "/mnt/ebs/nightly/git/SDK/extjs/src/layout/container/Table.js", - "private": false, - "alternateClassNames": [ - "Ext.layout.TableLayout" - ], - "name": "Ext.layout.container.Table", - "doc": "This layout allows you to easily render content into an HTML table. The total number of columns can be\nspecified, and rowspan and colspan can be used to create complex layouts within the table.\nThis class is intended to be extended or created via the layout: {type: 'table'}\nExt.container.Container.layout config, and should generally not need 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\nthe Ext.container.Container.layout object which will then be applied internally to the layout. In the\ncase of TableLayout, the only valid layout config properties are columns and tableAttrs.\nHowever, the items added to a TableLayout can supply the following table-specific config properties:
\n\n\nThe basic concept of building up a TableLayout is conceptually very similar to building up a standard\nHTML table. You simply add each panel (or \"cell\") that you want to include along with any span attributes\nspecified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts.\nRather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the\ntotal column count in the layoutConfig and start adding panels in their natural order from left to right,\ntop to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans,\nhow to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add\nup correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
\n\n\n
// This code will generate a layout table that is 3 columns by 2 rows\n// with some spanning included. The basic layout will be:\n// +--------+-----------------+\n// | A | B |\n// | |--------+--------|\n// | | C | D |\n// +--------+--------+--------+\n Ext.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 });\nAlternate names
Ext.layout.TableLayoutHierarchy
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\nlayoutConfig 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});\nFlag to notify the ownerCt Component on afterLayout of a change
\nDefaults to: false
Flag to notify the ownerCt Container on afterLayout of a change
\nDefaults to: false
The 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 adding\ncustomized styles to the container or any of its children using standard CSS rules. See\nExt.Component.componentCls also.
\n\n\n\nAn 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}\nDefaults to: null
An object containing properties which are added to the DomHelper specification used to\ncreate the layout's
An object containing properties which are added to the DomHelper specification used to\ncreate the layout's
An object containing properties which are added to the DomHelper specification used to\ncreate the layout's
An object containing properties which are added to the DomHelper specification used to\ncreate the layout's
Get 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 return 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'\nContainers should not lay out child components when collapsed.
\nCall 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 return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\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\"\nThe arguments, either an array or the arguments object
Returns the result after calling the overridden method
\nCall the parent's overridden method. For example:
\n\nExt.define('My.own.A', {\n constructor: function(test) {\n alert(test);\n }\n});\n\nExt.define('My.own.B', {\n extend: 'My.own.A',\n\n constructor: function(test) {\n alert(test);\n\n this.callParent([test + 1]);\n }\n});\n\nExt.define('My.own.C', {\n extend: 'My.own.B',\n\n constructor: function() {\n alert(\"Going to call parent's overriden constructor...\");\n\n this.callParent(arguments);\n }\n});\n\nvar a = new My.own.A(1); // alerts '1'\nvar b = new My.own.B(1); // alerts '1', then alerts '2'\nvar c = new My.own.C(2); // alerts \"Going to call parent's overriden constructor...\"\n // alerts '2', then alerts '3'\nThe arguments, either an array or the arguments object\nfrom the current method, for example: this.callParent(arguments)
Returns the result from the superclass' method
\nDestroys this layout. This is a template method that is empty by default, but should be implemented\nby subclasses that require explicit destruction to purge event handlers or remove DOM nodes.
\nThis is a template method. A hook into the functionality of this class.Feel free to override it in child classes.
Returns an array of child components either for a render phase (Performed in the beforeLayout method of the layout's\nbase class), or the layout phase (onLayout).
\n\nof child components
\nReturns the element into which rendering must take place. Defaults to the owner Container's target element.
\n\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 return this;\n }\n});\n\nvar awesome = new My.awesome.Class({\n name: 'Super Awesome'\n});\n\nalert(awesome.getName()); // 'Super Awesome'\nmixins The mixin prototypes as key - value pairs
\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 return this;\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\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});\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 '$$$$$$$'\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});\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()\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'\nclassName
\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.implement({\n meow: function() {\n alert('Meowww...');\n }\n });\n\n var kitty = new My.awesome.Cat;\n kitty.meow();\nOverride prototype members of this class. Overridden methods can be invoked via\ncallOverridden
\n\nExt.define('My.Cat', {\n constructor: function() {\n alert(\"I'm a cat!\");\n\n return this;\n }\n});\n\nMy.Cat.override({\n constructor: function() {\n alert(\"I'm going to be a cat!\");\n\n var instance = this.callOverridden();\n\n alert(\"Meeeeoooowwww\");\n\n return instance;\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\"\nthis
\n