1504
* Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Ext.DomQuery#select}
1505
* @param {String} path The selector/xpath query
1506
* @param {Node} root (optional) The start of the query (defaults to document).
1451
1511
Ext.query = Ext.DomQuery.select;
1513
* @class Ext.util.DelayedTask
1514
* <p> The DelayedTask class provides a convenient way to "buffer" the execution of a method,
1515
* performing setTimeout where a new timeout cancels the old timeout. When called, the
1516
* task will wait the specified time period before executing. If durng that time period,
1517
* the task is called again, the original call will be cancelled. This continues so that
1518
* the function is only called a single time for each iteration.</p>
1519
* <p>This method is especially useful for things like detecting whether a user has finished
1520
* typing in a text field. An example would be performing validation on a keypress. You can
1521
* use this class to buffer the keypress events for a certain number of milliseconds, and
1522
* perform only if they stop for that amount of time. Usage:</p><pre><code>
1523
var task = new Ext.util.DelayedTask(function(){
1524
alert(Ext.getDom('myInputField').value.length);
1526
// Wait 500ms before calling our function. If the user presses another key
1527
// during that 500ms, it will be cancelled and we'll wait another 500ms.
1528
Ext.get('myInputField').on('keypress', function(){
1529
task.{@link #delay}(500);
1532
* <p>Note that we are using a DelayedTask here to illustrate a point. The configuration
1533
* option <tt>buffer</tt> for {@link Ext.util.Observable#addListener addListener/on} will
1534
* also setup a delayed task for you to buffer events.</p>
1535
* @constructor The parameters to this constructor serve as defaults and are not required.
1536
* @param {Function} fn (optional) The default function to call.
1537
* @param {Object} scope The default scope (The <code><b>this</b></code> reference) in which the
1538
* function is called. If not specified, <code>this</code> will refer to the browser window.
1539
* @param {Array} args (optional) The default Array of arguments.
1453
1541
Ext.util.DelayedTask = function(fn, scope, args){
1468
1563
id = setInterval(call, delay);
1567
* Cancel the last queued timeout
1472
1569
me.cancel = function(){
1474
1571
clearInterval(id);
1576
* @class Ext.Element
1577
* <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
1578
* <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p>
1579
* <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
1580
* access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
1581
* browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
1585
var el = Ext.get("my-div");
1587
// by DOM element reference
1588
var el = Ext.get(myDivElement);
1590
* <b>Animations</b><br />
1591
* <p>When an element is manipulated, by default there is no animation.</p>
1593
var el = Ext.get("my-div");
1598
* <p>Many of the functions for manipulating an element have an optional "animate" parameter. This
1599
* parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
1601
// default animation
1602
el.setWidth(100, true);
1605
* <p>To configure the effects, an object literal with animation options to use as the Element animation
1606
* configuration object can also be specified. Note that the supported Element animation configuration
1607
* options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported
1608
* Element animation configuration options are:</p>
1610
Option Default Description
1611
--------- -------- ---------------------------------------------
1612
{@link Ext.Fx#duration duration} .35 The duration of the animation in seconds
1613
{@link Ext.Fx#easing easing} easeOut The easing method
1614
{@link Ext.Fx#callback callback} none A function to execute when the anim completes
1615
{@link Ext.Fx#scope scope} this The scope (this) of the callback function
1619
// Element animation options object
1621
{@link Ext.Fx#duration duration}: 1,
1622
{@link Ext.Fx#easing easing}: 'elasticIn',
1623
{@link Ext.Fx#callback callback}: this.foo,
1624
{@link Ext.Fx#scope scope}: this
1626
// animation with some options set
1627
el.setWidth(100, opt);
1629
* <p>The Element animation object being used for the animation will be set on the options
1630
* object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>
1632
// using the "anim" property to get the Anim object
1633
if(opt.anim.isAnimated()){
1637
* <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
1638
* <p><b> Composite (Collections of) Elements</b></p>
1639
* <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
1640
* @constructor Create a new Element directly.
1641
* @param {String/HTMLElement} element
1642
* @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
1480
1645
var DOC = document;
1710
* Fires when a mouse click is detected within the element.
1711
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1712
* @param {HtmlElement} t The target of the event.
1713
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1716
* @event contextmenu
1717
* Fires when a right click is detected within the element.
1718
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1719
* @param {HtmlElement} t The target of the event.
1720
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1724
* Fires when a mouse double click is detected within the element.
1725
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1726
* @param {HtmlElement} t The target of the event.
1727
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1731
* Fires when a mousedown is detected within the element.
1732
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1733
* @param {HtmlElement} t The target of the event.
1734
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1738
* Fires when a mouseup is detected within the element.
1739
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1740
* @param {HtmlElement} t The target of the event.
1741
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1745
* Fires when a mouseover is detected within the element.
1746
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1747
* @param {HtmlElement} t The target of the event.
1748
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1752
* Fires when a mousemove is detected with the element.
1753
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1754
* @param {HtmlElement} t The target of the event.
1755
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1759
* Fires when a mouseout is detected with the element.
1760
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1761
* @param {HtmlElement} t The target of the event.
1762
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1766
* Fires when the mouse enters the element.
1767
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1768
* @param {HtmlElement} t The target of the event.
1769
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1773
* Fires when the mouse leaves the element.
1774
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1775
* @param {HtmlElement} t The target of the event.
1776
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1782
* Fires when a keypress is detected within the element.
1783
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1784
* @param {HtmlElement} t The target of the event.
1785
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1789
* Fires when a keydown is detected within the element.
1790
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1791
* @param {HtmlElement} t The target of the event.
1792
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1796
* Fires when a keyup is detected within the element.
1797
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1798
* @param {HtmlElement} t The target of the event.
1799
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1803
// HTML frame/object events
1806
* Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.
1807
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1808
* @param {HtmlElement} t The target of the event.
1809
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1813
* Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed.
1814
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1815
* @param {HtmlElement} t The target of the event.
1816
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1820
* Fires when an object/image is stopped from loading before completely loaded.
1821
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1822
* @param {HtmlElement} t The target of the event.
1823
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1827
* Fires when an object/image/frame cannot be loaded properly.
1828
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1829
* @param {HtmlElement} t The target of the event.
1830
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1834
* Fires when a document view is resized.
1835
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1836
* @param {HtmlElement} t The target of the event.
1837
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1841
* Fires when a document view is scrolled.
1842
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1843
* @param {HtmlElement} t The target of the event.
1844
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1850
* Fires when a user selects some text in a text field, including input and textarea.
1851
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1852
* @param {HtmlElement} t The target of the event.
1853
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1857
* Fires when a control loses the input focus and its value has been modified since gaining focus.
1858
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1859
* @param {HtmlElement} t The target of the event.
1860
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1864
* Fires when a form is submitted.
1865
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1866
* @param {HtmlElement} t The target of the event.
1867
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1871
* Fires when a form is reset.
1872
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1873
* @param {HtmlElement} t The target of the event.
1874
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1878
* Fires when an element receives focus either via the pointing device or by tab navigation.
1879
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1880
* @param {HtmlElement} t The target of the event.
1881
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1885
* Fires when an element loses focus either via the pointing device or by tabbing navigation.
1886
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1887
* @param {HtmlElement} t The target of the event.
1888
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1891
// User Interface events
1894
* Where supported. Similar to HTML focus event, but can be applied to any focusable element.
1895
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1896
* @param {HtmlElement} t The target of the event.
1897
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1900
* @event DOMFocusOut
1901
* Where supported. Similar to HTML blur event, but can be applied to any focusable element.
1902
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1903
* @param {HtmlElement} t The target of the event.
1904
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1907
* @event DOMActivate
1908
* Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
1909
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1910
* @param {HtmlElement} t The target of the event.
1911
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1914
// DOM Mutation events
1916
* @event DOMSubtreeModified
1917
* Where supported. Fires when the subtree is modified.
1918
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1919
* @param {HtmlElement} t The target of the event.
1920
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1923
* @event DOMNodeInserted
1924
* Where supported. Fires when a node has been added as a child of another node.
1925
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1926
* @param {HtmlElement} t The target of the event.
1927
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1930
* @event DOMNodeRemoved
1931
* Where supported. Fires when a descendant node of the element is removed.
1932
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1933
* @param {HtmlElement} t The target of the event.
1934
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1937
* @event DOMNodeRemovedFromDocument
1938
* Where supported. Fires when a node is being removed from a document.
1939
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1940
* @param {HtmlElement} t The target of the event.
1941
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1944
* @event DOMNodeInsertedIntoDocument
1945
* Where supported. Fires when a node is being inserted into a document.
1946
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1947
* @param {HtmlElement} t The target of the event.
1948
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1951
* @event DOMAttrModified
1952
* Where supported. Fires when an attribute has been modified.
1953
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1954
* @param {HtmlElement} t The target of the event.
1955
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1958
* @event DOMCharacterDataModified
1959
* Where supported. Fires when the character data has been modified.
1960
* @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
1961
* @param {HtmlElement} t The target of the event.
1962
* @param {Object} o The options configuration passed to the {@link #addListener} call.
1966
* The default unit to append to CSS values where a unit isn't provided (defaults to px).
1580
1969
defaultUnit : "px",
1972
* Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
1973
* @param {String} selector The simple selector to test
1974
* @return {Boolean} True if this element matches the selector, else false
1583
1976
is : function(simpleSelector){
1584
1977
return Ext.DomQuery.is(this.dom, simpleSelector);
1588
focus : function(defer, dom) {
1981
* Tries to focus the element. Any exceptions are caught and ignored.
1982
* @param {Number} defer (optional) Milliseconds to defer the focus
1983
* @return {Ext.Element} this
1985
focus : function(defer, /* private */ dom) {
1590
1987
dom = dom || me.dom;
2010
* Returns the value of the "value" attribute
2011
* @param {Boolean} asNumber true to parse the value as a number
2012
* @return {String/Number}
1610
2014
getValue : function(asNumber){
1611
2015
var val = this.dom.value;
1612
2016
return asNumber ? parseInt(val, 10) : val;
2020
* Appends an event handler to this element. The shorthand version {@link #on} is equivalent.
2021
* @param {String} eventName The name of event to handle.
2022
* @param {Function} fn The handler function the event invokes. This function is passed
2023
* the following parameters:<ul>
2024
* <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
2025
* <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
2026
* Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
2027
* <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
2029
* @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
2030
* <b>If omitted, defaults to this Element.</b>.
2031
* @param {Object} options (optional) An object containing handler configuration properties.
2032
* This may contain any of the following properties:<ul>
2033
* <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
2034
* <b>If omitted, defaults to this Element.</b></div></li>
2035
* <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>
2036
* <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
2037
* <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
2038
* <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
2039
* <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
2040
* <li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
2041
* <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
2042
* <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
2043
* <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
2044
* by the specified number of milliseconds. If the event fires again within that time, the original
2045
* handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
2048
* <b>Combining Options</b><br>
2049
* In the following examples, the shorthand form {@link #on} is used rather than the more verbose
2050
* addListener. The two are equivalent. Using the options argument, it is possible to combine different
2051
* types of listeners:<br>
2053
* A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
2054
* options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
2056
el.on('click', this.onClick, this, {
2061
});</code></pre></p>
2063
* <b>Attaching multiple handlers in 1 call</b><br>
2064
* The method also allows for a single argument to be passed which is a config object containing properties
2065
* which specify multiple handlers.</p>
2075
fn: this.onMouseOver,
2079
fn: this.onMouseOut,
2084
* Or a shorthand syntax:<br>
2085
* Code:<pre><code></p>
2087
'click' : this.onClick,
2088
'mouseover' : this.onMouseOver,
2089
'mouseout' : this.onMouseOut,
2093
* <p><b>delegate</b></p>
2094
* <p>This is a configuration option that you can pass along when registering a handler for
2095
* an event to assist with event delegation. Event delegation is a technique that is used to
2096
* reduce memory consumption and prevent exposure to memory-leaks. By registering an event
2097
* for a container element as opposed to each element within a container. By setting this
2098
* configuration option to a simple selector, the target element will be filtered to look for
2099
* a descendant of the target.
2100
* For example:<pre><code>
2101
// using this markup:
2103
<p id='p1'>paragraph one</p>
2104
<p id='p2' class='clickable'>paragraph two</p>
2105
<p id='p3'>paragraph three</p>
2107
// utilize event delegation to registering just one handler on the container element:
2108
el = Ext.get('elId');
2113
console.info(t.id); // 'p2'
2117
// filter the target element to be a descendant with the class 'clickable'
2118
delegate: '.clickable'
2122
* @return {Ext.Element} this
1616
2124
addListener : function(eventName, fn, scope, options){
1617
2125
Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
2130
* Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
2131
* <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
2132
* listener, the same scope must be specified here.
2135
el.removeListener('click', this.handlerFn);
2137
el.un('click', this.handlerFn);
2139
* @param {String} eventName The name of the event from which to remove the handler.
2140
* @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
2141
* @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
2142
* then this must refer to the same object.
2143
* @return {Ext.Element} this
1622
2145
removeListener : function(eventName, fn, scope){
1623
2146
Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
2151
* Removes all previous added listeners from this element
2152
* @return {Ext.Element} this
1628
2154
removeAllListeners : function(){
1629
2155
Ext.EventManager.removeAll(this.dom);
2160
* Recursively removes all previous added listeners from this element and its children
2161
* @return {Ext.Element} this
1634
2163
purgeAllListeners : function() {
1635
2164
Ext.EventManager.purgeElement(this, true);
2168
* @private Test if size has a unit, otherwise appends the default
1639
2170
addUnits : function(size){
1640
2171
if(size === "" || size == "auto" || size === undefined){
1641
2172
size = size || '';
45224
45911
'emailText' : 'This field should be an e-mail address in the format "user@example.com"',
45226
'emailMask' : /[a-z0-9_\.\-@\+]/i,
45913
'emailMask' : /[a-z0-9_\.\-\+\'@]/i,
45916
* The function used to validate URLs
45917
* @param {String} value The URL
45918
* @return {Boolean} true if the RegExp test passed, and false if not.
45229
45920
'url' : function(v){
45230
45921
return url.test(v);
45924
* The error text to display when the url validation function returns false. Defaults to:
45925
* <tt>'This field should be a URL in the format "http:/'+'/www.example.com"'</tt>
45233
45928
'urlText' : 'This field should be a URL in the format "http:/'+'/www.example.com"',
45931
* The function used to validate alpha values
45932
* @param {String} value The value
45933
* @return {Boolean} true if the RegExp test passed, and false if not.
45236
45935
'alpha' : function(v){
45237
45936
return alpha.test(v);
45939
* The error text to display when the alpha validation function returns false. Defaults to:
45940
* <tt>'This field should only contain letters and _'</tt>
45240
45943
'alphaText' : 'This field should only contain letters and _',
45945
* The keystroke filter mask to be applied on alpha input. Defaults to:
45946
* <tt>/[a-z_]/i</tt>
45242
45949
'alphaMask' : /[a-z_]/i,
45952
* The function used to validate alphanumeric values
45953
* @param {String} value The value
45954
* @return {Boolean} true if the RegExp test passed, and false if not.
45245
45956
'alphanum' : function(v){
45246
45957
return alphanum.test(v);
45960
* The error text to display when the alphanumeric validation function returns false. Defaults to:
45961
* <tt>'This field should only contain letters, numbers and _'</tt>
45249
45964
'alphanumText' : 'This field should only contain letters, numbers and _',
45966
* The keystroke filter mask to be applied on alphanumeric input. Defaults to:
45967
* <tt>/[a-z0-9_]/i</tt>
45251
45970
'alphanumMask' : /[a-z0-9_]/i
45974
* @class Ext.grid.GridPanel
45975
* @extends Ext.Panel
45976
* <p>This class represents the primary interface of a component based grid control to represent data
45977
* in a tabular format of rows and columns. The GridPanel is composed of the following:</p>
45978
* <div class="mdetail-params"><ul>
45979
* <li><b>{@link Ext.data.Store Store}</b> : The Model holding the data records (rows)
45980
* <div class="sub-desc"></div></li>
45981
* <li><b>{@link Ext.grid.ColumnModel Column model}</b> : Column makeup
45982
* <div class="sub-desc"></div></li>
45983
* <li><b>{@link Ext.grid.GridView View}</b> : Encapsulates the user interface
45984
* <div class="sub-desc"></div></li>
45985
* <li><b>{@link Ext.grid.AbstractSelectionModel selection model}</b> : Selection behavior
45986
* <div class="sub-desc"></div></li>
45988
* <p>Example usage:</p>
45990
var grid = new Ext.grid.GridPanel({
45991
{@link #store}: new {@link Ext.data.Store}({
45992
{@link Ext.data.Store#autoDestroy autoDestroy}: true,
45993
{@link Ext.data.Store#reader reader}: reader,
45994
{@link Ext.data.Store#data data}: xg.dummyData
45996
{@link #colModel}: new {@link Ext.grid.ColumnModel}({
45997
{@link Ext.grid.ColumnModel#defaults defaults}: {
46001
{@link Ext.grid.ColumnModel#columns columns}: [
46002
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
46003
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
46004
{header: 'Change', dataIndex: 'change'},
46005
{header: '% Change', dataIndex: 'pctChange'},
46006
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
46008
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
46009
xtype: 'datecolumn', format: 'M d, Y'
46013
{@link #viewConfig}: {
46014
{@link Ext.grid.GridView#forceFit forceFit}: true,
46016
// Return CSS class to apply to rows depending upon data values
46017
{@link Ext.grid.GridView#getRowClass getRowClass}: function(record, index) {
46018
var c = record.{@link Ext.data.Record#get get}('change');
46020
return 'price-fall';
46021
} else if (c > 0) {
46022
return 'price-rise';
46026
{@link #sm}: new Ext.grid.RowSelectionModel({singleSelect:true}),
46030
title: 'Framed with Row Selection and Horizontal Scrolling',
46031
iconCls: 'icon-grid'
46034
* <p><b><u>Notes:</u></b></p>
46035
* <div class="mdetail-params"><ul>
46036
* <li>Although this class inherits many configuration options from base classes, some of them
46037
* (such as autoScroll, autoWidth, layout, items, etc) are not used by this class, and will
46038
* have no effect.</li>
46039
* <li>A grid <b>requires</b> a width in which to scroll its columns, and a height in which to
46040
* scroll its rows. These dimensions can either be set explicitly through the
46041
* <tt>{@link Ext.BoxComponent#height height}</tt> and <tt>{@link Ext.BoxComponent#width width}</tt>
46042
* configuration options or implicitly set by using the grid as a child item of a
46043
* {@link Ext.Container Container} which will have a {@link Ext.Container#layout layout manager}
46044
* provide the sizing of its child items (for example the Container of the Grid may specify
46045
* <tt>{@link Ext.Container#layout layout}:'fit'</tt>).</li>
46046
* <li>To access the data in a Grid, it is necessary to use the data model encapsulated
46047
* by the {@link #store Store}. See the {@link #cellclick} event for more details.</li>
46050
* @param {Object} config The config object
45255
46053
Ext.grid.GridPanel = Ext.extend(Ext.Panel, {
46055
* @cfg {String} autoExpandColumn
46056
* <p>The <tt>{@link Ext.grid.Column#id id}</tt> of a {@link Ext.grid.Column column} in
46057
* this grid that should expand to fill unused space. This value specified here can not
46058
* be <tt>0</tt>.</p>
46059
* <br><p><b>Note</b>: If the Grid's {@link Ext.grid.GridView view} is configured with
46060
* <tt>{@link Ext.grid.GridView#forceFit forceFit}=true</tt> the <tt>autoExpandColumn</tt>
46061
* is ignored. See {@link Ext.grid.Column}.<tt>{@link Ext.grid.Column#width width}</tt>
46062
* for additional details.</p>
46063
* <p>See <tt>{@link #autoExpandMax}</tt> and <tt>{@link #autoExpandMin}</tt> also.</p>
45257
46065
autoExpandColumn : false,
added
removed
static/scripts/ext/ext-all-debug.js
