Creates new Array object. Either a number that specifies the length of array or any number of items for the array.

Reflects the number of elements in an array. The value of the <code>length</code> property is an integer with a positive sign and a value less than 2 to the 32 power (232). You can set the <code>length</code> property to truncate an array at any time. When you extend an array by changing its <code>length</code> property, the number of actual elements does not increase; for example, if you set <code>length</code> to 3 when it is currently 2, the array still contains only 2 elements. In the following example the array numbers is iterated through by looking at the <code>length</code> property to see how many elements it has. Each value is then doubled. <pre><code>var numbers = [1,2,3,4,5]; for (var i = 0; i < numbers.length; i++) { numbers[i] *= 2; } // numbers is now [2,4,6,8,10]; </code></pre> The following example shortens the array <code>statesUS</code> to a length of 50 if the current <code>length</code> is greater than 50. <pre><code>if (statesUS.length > 50) { statesUS.length=50 } </code></pre> Returns a new array comprised of this array joined with other array(s) and/or value(s). <code>concat</code> creates a new array consisting of the elements in the <code>this</code> object on which it is called, followed in order by, for each argument, the elements of that argument (if the argument is an array) or the argument itself (if the argument is not an array). <code>concat</code> does not alter <code>this</code> or any of the arrays provided as arguments but instead returns a "one level deep" copy that contains copies of the same elements combined from the original arrays. Elements of the original arrays are copied into the new array as follows: Object references (and not the actual object): <code>concat</code> copies object references into the new array. Both the original and new array refer to the same object. That is, if a referenced object is modified, the changes are visible to both the new and original arrays. Strings and numbers (not <a href="#!/api/String" rel="String" class="docClass">String</a> and <a href="#!/api/Number" rel="Number" class="docClass">Number</a> objects): <code>concat</code> copies the values of strings and numbers into the new array. Any operation on the new array will have no effect on the original arrays, and vice versa. <h3>Concatenating two arrays</h3> The following code concatenates two arrays: <pre><code>var alpha = ["a", "b", "c"]; var numeric = [1, 2, 3]; // creates array ["a", "b", "c", 1, 2, 3]; alpha and numeric are unchanged var alphaNumeric = alpha.concat(numeric); </code></pre> <h3>Concatenating three arrays</h3> The following code concatenates three arrays: <pre><code>var num1 = [1, 2, 3]; var num2 = [4, 5, 6]; var num3 = [7, 8, 9]; // creates array [1, 2, 3, 4, 5, 6, 7, 8, 9]; num1, num2, num3 are unchanged var nums = num1.concat(num2, num3); </code></pre> <h3>Concatenating values to an array</h3> The following code concatenates three values to an array: <pre><code>var alpha = ['a', 'b', 'c']; // creates array ["a", "b", "c", 1, 2, 3], leaving alpha unchanged var alphaNumeric = alpha.concat(1, [2, 3]); </code></pre> Joins all elements of an array into a string. The string conversions of all array elements are joined into one string. The following example creates an array, <code>a</code>, with three elements, then joins the array three times: using the default separator, then a comma and a space, and then a plus. <pre><code>var a = new Array("Wind","Rain","Fire"); var myVar1 = a.join(); // assigns "Wind,Rain,Fire" to myVar1 var myVar2 = a.join(", "); // assigns "Wind, Rain, Fire" to myVar2 var myVar3 = a.join(" + "); // assigns "Wind + Rain + Fire" to myVar3 </code></pre> The pop method removes the last element from an array and returns that value to the caller. <code>pop</code> is intentionally generic; this method can be called or applied to objects resembling arrays. Objects which do not contain a length property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. <pre><code>var myFish = ["angel", "clown", "mandarin", "surgeon"]; var popped = myFish.pop(); alert(popped); // Alerts 'surgeon' </code></pre> Adds one or more elements to the end of an array and returns the new length of the array. <code>push</code> is intentionally generic. This method can be called or applied to objects resembling arrays. The push method relies on a length property to determine where to start inserting the given values. If the length property cannot be converted into a number, the index used is 0. This includes the possibility of length being nonexistent, in which case length will also be created. The only native, array-like objects are strings, although they are not suitable in applications of this method, as strings are immutable. <h3>Adding elements to an array</h3> The following code creates the sports array containing two elements, then appends two elements to it. After the code executes, sports contains 4 elements: "soccer", "baseball", "football" and "swimming". <pre><code>var sports = ["soccer", "baseball"]; sports.push("football", "swimming"); </code></pre> Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first. The reverse method transposes the elements of the calling array object in place, mutating the array, and returning a reference to the array. The following example creates an array myArray, containing three elements, then reverses the array. <pre><code>var myArray = ["one", "two", "three"]; myArray.reverse(); </code></pre> This code changes myArray so that: <ul> <li>myArray[0] is "three"</li> <li>myArray[1] is "two"</li> <li>myArray[2] is "one"</li> </ul> Removes the first element from an array and returns that element. The <code>shift</code> method removes the element at the zeroeth index and shifts the values at consecutive indexes down, then returns the removed value. <code>shift</code> is intentionally generic; this method can be called or applied to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. The following code displays the <code>myFish</code> array before and after removing its first element. It also displays the removed element: <pre><code>// assumes a println function is defined var myFish = ["angel", "clown", "mandarin", "surgeon"]; println("myFish before: " + myFish); var shifted = myFish.shift(); println("myFish after: " + myFish); println("Removed this element: " + shifted); </code></pre> This example displays the following: <pre><code>myFish before: angel,clown,mandarin,surgeon myFish after: clown,mandarin,surgeon Removed this element: angel </code></pre> Extracts a section of an array and returns a new array. <code>slice</code> does not alter the original array, but returns a new "one level deep" copy that contains copies of the elements sliced from the original array. Elements of the original array are copied into the new array as follows: * For object references (and not the actual object), <code>slice</code> copies object references into the new array. Both the original and new array refer to the same object. If a referenced object changes, the changes are visible to both the new and original arrays. * For strings and numbers (not <a href="#!/api/String" rel="String" class="docClass">String</a> and <a href="#!/api/Number" rel="Number" class="docClass">Number</a> objects), <code>slice</code> copies strings and numbers into the new array. Changes to the string or number in one array does not affect the other array. If a new element is added to either array, the other array is not affected. <h3>Using slice</h3> In the following example, <code>slice</code> creates a new array, <code>newCar</code>, from <code>myCar</code>. Both include a reference to the object <code>myHonda</code>. When the color of <code>myHonda</code> is changed to purple, both arrays reflect the change. <pre><code>// Using slice, create newCar from myCar. var myHonda = { color: "red", wheels: 4, engine: { cylinders: 4, size: 2.2 } }; var myCar = [myHonda, 2, "cherry condition", "purchased 1997"]; var newCar = myCar.slice(0, 2); // Print the values of myCar, newCar, and the color of myHonda // referenced from both arrays. print("myCar = " + myCar.toSource()); print("newCar = " + newCar.toSource()); print("myCar[0].color = " + myCar[0].color); print("newCar[0].color = " + newCar[0].color); // Change the color of myHonda. myHonda.color = "purple"; print("The new color of my Honda is " + myHonda.color); // Print the color of myHonda referenced from both arrays. print("myCar[0].color = " + myCar[0].color); print("newCar[0].color = " + newCar[0].color); </code></pre> This script writes: <pre><code>myCar = [{color:"red", wheels:4, engine:{cylinders:4, size:2.2}}, 2, "cherry condition", "purchased 1997"] newCar = [{color:"red", wheels:4, engine:{cylinders:4, size:2.2}}, 2] myCar[0].color = red newCar[0].color = red The new color of my Honda is purple myCar[0].color = purple newCar[0].color = purple </code></pre> Sorts the elements of an array. If <code>compareFunction</code> is not supplied, elements are sorted by converting them to strings and comparing strings in lexicographic ("dictionary" or "telephone book," not numerical) order. For example, "80" comes before "9" in lexicographic order, but in a numeric sort 9 comes before 80. If <code>compareFunction</code> is supplied, the array elements are sorted according to the return value of the compare function. If a and b are two elements being compared, then: If <code>compareFunction(a, b)</code> is less than 0, sort <code>a</code> to a lower index than <code>b</code>. If <code>compareFunction(a, b)</code> returns 0, leave <code>a</code> and <code>b</code> unchanged with respect to each other, but sorted with respect to all different elements. Note: the ECMAscript standard does not guarantee this behaviour, and thus not all browsers respect this. If <code>compareFunction(a, b)</code> is greater than 0, sort <code>b</code> to a lower index than <code>a</code>. <code>compareFunction(a, b)</code> must always returns the same value when given a specific pair of elements a and b as its two arguments. If inconsistent results are returned then the sort order is undefined So, the compare function has the following form: <pre><code>function compare(a, b) { if (a is less than b by some ordering criterion) return -1; if (a is greater than b by the ordering criterion) return 1; // a must be equal to b return 0; } </code></pre> To compare numbers instead of strings, the compare function can simply subtract <code>b</code> from <code>a</code>: <pre><code>function compareNumbers(a, b) { return a - b; } </code></pre> The sort() method can be conveniently used with closures: <pre><code>var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); print(numbers); </code></pre> Adds and/or removes elements from an array. If you specify a different number of elements to insert than the number you're removing, the array will have a different length at the end of the call. <pre><code>// assumes a print function is defined var myFish = ["angel", "clown", "mandarin", "surgeon"]; print("myFish: " + myFish); var removed = myFish.splice(2, 0, "drum"); print("After adding 1: " + myFish); print("removed is: " + removed); removed = myFish.splice(3, 1); print("After removing 1: " + myFish); print("removed is: " + removed); removed = myFish.splice(2, 1, "trumpet"); print("After replacing 1: " + myFish); print("removed is: " + removed); removed = myFish.splice(0, 2, "parrot", "anemone", "blue"); print("After replacing 2: " + myFish); print("removed is: " + removed); </code></pre> This script displays: <pre><code>myFish: angel,clown,mandarin,surgeon After adding 1: angel,clown,drum,mandarin,surgeon removed is: After removing 1: angel,clown,drum,surgeon removed is: mandarin After replacing 1: angel,clown,trumpet,surgeon removed is: drum After replacing 2: parrot,anemone,blue,trumpet,surgeon removed is: angel,clown </code></pre> Returns a string representing the array and its elements. Overrides the <code>Object.prototype.toString</code> method. The <a href="#!/api/Array" rel="Array" class="docClass">Array</a> object overrides the <code>toString</code> method of <a href="#!/api/Object" rel="Object" class="docClass">Object</a>. For Array objects, the <code>toString</code> method joins the array and returns one string containing each array element separated by commas. For example, the following code creates an array and uses <code>toString</code> to convert the array to a string. <pre><code>var monthNames = new Array("Jan","Feb","Mar","Apr"); myVar = monthNames.toString(); // assigns "Jan,Feb,Mar,Apr" to myVar </code></pre> JavaScript calls the <code>toString</code> method automatically when an array is to be represented as a text value or when an array is referred to in a string concatenation. Adds one or more elements to the front of an array and returns the new length of the array. The <code>unshift</code> method inserts the given values to the beginning of an array-like object. <code>unshift</code> is intentionally generic; this method can be called or applied to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner. The following code displays the myFish array before and after adding elements to it. <pre><code>// assumes a println function exists myFish = ["angel", "clown"]; println("myFish before: " + myFish); unshifted = myFish.unshift("drum", "lion"); println("myFish after: " + myFish); println("New length: " + unshifted); </code></pre> This example displays the following: <pre><code>myFish before: ["angel", "clown"] myFish after: ["drum", "lion", "angel", "clown"] New length: 4 </code></pre> Creates a new boolean object. Either a truthy or falsy value to create the corresponding Boolean object.

Returns a string of either "true" or "false" depending upon the value of the object. Overrides the <code>Object.prototype.toString</code> method. The Boolean object overrides the <code>toString</code> method of the <code>Object</code> object; it does not inherit <code><a href="#!/api/Object-method-toString" rel="Object-method-toString" class="docClass">Object.toString</a></code>. For Boolean objects, the <code>toString</code> method returns a string representation of the object. JavaScript calls the <code>toString</code> method automatically when a Boolean is to be represented as a text value or when a Boolean is referred to in a string concatenation. For Boolean objects and values, the built-in <code>toString</code> method returns the string <code>"true"</code> or <code>"false"</code> depending on the value of the boolean object. In the following code, <code>flag.toString</code> returns <code>"true"</code>. <pre><code>var flag = new Boolean(true) var myVar = flag.toString() </code></pre> Returns the primitive value of the <code>Boolean</code> object. Overrides the <code>Object.prototype.valueOf</code> method. The <code>valueOf</code> method of Boolean returns the primitive value of a Boolean object or literal Boolean as a Boolean data type. This method is usually called internally by JavaScript and not explicitly in code. <pre><code>x = new Boolean(); myVar = x.valueOf() //assigns false to myVar </code></pre> Creates new Date object. Either UNIX timestamp, date string, or year (when month and day parameters also provided): <ul> <li>Integer value representing the number of milliseconds since 1 January 1970 00:00:00 UTC (Unix Epoch).</li> <li>String value representing a date. The string should be in a format recognized by the parse method (IETF-compliant RFC 1123 timestamps).</li> <li>Integer value representing the year. For compatibility (in order to avoid the Y2K problem), you should always specify the year in full; use 1998, rather than 98.</li> </ul> Integer value representing the month, beginning with 0 for January to 11 for December. Integer value representing the day of the month (1-31). Integer value representing the hour of the day (0-23). Integer value representing the minute segment (0-59) of a time reading. Integer value representing the second segment (0-59) of a time reading. Integer value representing the millisecond segment (0-999) of a time reading.

Returns the numeric value corresponding to the current time. The second statement below assigns the value 25 to the variable <code>day</code>, based on the value of the <code>Date</code> object <code>Xmas95</code>. <pre><code>Xmas95 = new Date("December 25, 1995 23:15:00") day = Xmas95.getDate() </code></pre> Returns the numeric value corresponding to the current time. The value returned by <code>getDay</code> is an integer corresponding to the day of the week: 0 for Sunday, 1 for Monday, 2 for Tuesday, and so on. The second statement below assigns the value 1 to <code>weekday</code>, based on the value of the <code>Date</code> object <code>Xmas95</code>. December 25, 1995, is a Monday. <pre><code>Xmas95 = new Date("December 25, 1995 23:15:00"); weekday = Xmas95.getDay(); </code></pre> Returns the numeric value corresponding to the current time. The value returned by <code>getFullYear</code> is an absolute number. For dates between the years 1000 and 9999, <code>getFullYear</code> returns a four-digit number, for example, 1995. Use this function to make sure a year is compliant with years after 2000. Use this method instead of the <code>getYear</code> method. The following example assigns the four-digit value of the current year to the variable yr. <pre><code>var today = new Date(); var yr = today.getFullYear(); </code></pre> Returns the numeric value corresponding to the current time. The second statement below assigns the value 23 to the variable <code>hours</code>, based on the value of the <code>Date</code> object <code>Xmas95</code>. <pre><code>Xmas95 = new Date("December 25, 1995 23:15:00") hours = Xmas95.getHours() </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the milliseconds portion of the current time to the variable ms. <pre><code>var ms; Today = new Date(); ms = Today.getMilliseconds(); </code></pre> Returns the numeric value corresponding to the current time. The second statement below assigns the value 15 to the variable <code>minutes</code>, based on the value of the <code>Date</code> object <code>Xmas95</code>. <pre><code>Xmas95 = new Date("December 25, 1995 23:15:00") minutes = Xmas95.getMinutes() </code></pre> Returns the numeric value corresponding to the current time. The second statement below assigns the value 11 to the variable <code>month</code>, based on the value of the <code>Date</code> object <code>Xmas95</code>. <pre><code>Xmas95 = new Date("December 25, 1995 23:15:00") month = Xmas95.getMonth() </code></pre> Returns the numeric value corresponding to the current time. The second statement below assigns the value 30 to the variable <code>secs</code>, based on the value of the <code>Date</code> object <code>Xmas95</code>. <pre><code>Xmas95 = new Date("December 25, 1995 23:15:30") secs = Xmas95.getSeconds() </code></pre> Returns the numeric value corresponding to the current time. The value returned by the <code>getTime</code> method is the number of milliseconds since 1 January 1970 00:00:00 UTC. You can use this method to help assign a date and time to another <code>Date</code> object. This method is functionally equivalent to the <code>valueOf</code> method. Using getTime for copying dates Constructing a date object with the identical time value. <pre><code>var birthday = new Date(1994, 12, 10); var copy = new Date(); copy.setTime(birthday.getTime()); </code></pre> Measuring execution time Subtracting two subsequent getTime calls on newly generated Date objects, give the time span between these two calls. This can be used to calculate the executing time of some operations. <pre><code>var end, start; start = new Date(); for (var i = 0; i < 1000; i++) Math.sqrt(i); end = new Date(); console.log("Operation took " + (end.getTime() - start.getTime()) + " msec"); </code></pre> Returns the numeric value corresponding to the current time. The time-zone offset is the difference, in minutes, between UTC and local time. Note that this means that the offset is positive if the local timezone is behind UTC and negative if it is ahead. For example, if your time zone is UTC+10 (Australian Eastern Standard Time), -600 will be returned. Daylight savings time prevents this value from being a constant even for a given locale <pre><code>x = new Date() currentTimeZoneOffsetInHours = x.getTimezoneOffset()/60 </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the day portion of the current date to the variable <code>d</code>. <pre><code>var d; Today = new Date(); d = Today.getUTCDate(); </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the weekday portion of the current date to the variable <code>weekday</code>. <pre><code>var weekday; Today = new Date() weekday = Today.getUTCDay() </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the four-digit value of the current year to the variable <code>yr</code>. <pre><code>var yr; Today = new Date(); yr = Today.getUTCFullYear(); </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the hours portion of the current time to the variable <code>hrs</code>. <pre><code>var hrs; Today = new Date(); hrs = Today.getUTCHours(); </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the milliseconds portion of the current time to the variable <code>ms</code>. <pre><code>var ms; Today = new Date(); ms = Today.getUTCMilliseconds(); </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the minutes portion of the current time to the variable <code>min</code>. <pre><code>var min; Today = new Date(); min = Today.getUTCMinutes(); </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the month portion of the current date to the variable <code>mon</code>. <pre><code>var mon; Today = new Date(); mon = Today.getUTCMonth(); </code></pre> Returns the numeric value corresponding to the current time. The following example assigns the seconds portion of the current time to the variable <code>sec</code>. <pre><code>var sec; Today = new Date(); sec = Today.getUTCSeconds(); </code></pre> Sets the day of the month (1-31) for a specified date according to local time. If the parameter you specify is outside of the expected range, <code>setDate</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 0 for <code>dayValue</code>, the date will be set to the last day of the previous month. The second statement below changes the day for theBigDay to July 24 from its original value. <pre><code>theBigDay = new Date("July 27, 1962 23:30:00") theBigDay.setDate(24) </code></pre> Sets the full year (4 digits for 4-digit years) for a specified date according to local time. If you do not specify the <code>monthValue</code> and <code>dayValue</code> parameters, the values returned from the <code>getMonth</code> and <code>getDate</code> methods are used. If a parameter you specify is outside of the expected range, <code>setFullYear</code> attempts to update the other parameters and the date information in the <code>Date</code> object accordingly. For example, if you specify 15 for monthValue, the year is incremented by 1 (year + 1), and 3 is used for the month. theBigDay = new Date(); theBigDay.setFullYear(1997); Sets the hours (0-23) for a specified date according to local time. If you do not specify the <code>minutesValue</code>, <code>secondsValue</code>, and <code>msValue</code> parameters, the values returned from the <code>getUTCMinutes</code>, <code>getUTCSeconds</code>, and <code>getMilliseconds</code> methods are used. If a parameter you specify is outside of the expected range, setHours attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 100 for <code>secondsValue</code>, the minutes will be incremented by 1 (min + 1), and 40 will be used for seconds. <pre><code>theBigDay.setHours(7) </code></pre> Sets the milliseconds (0-999) for a specified date according to local time. If you specify a number outside the expected range, the date information in the <code>Date</code> object is updated accordingly. For example, if you specify 1005, the number of seconds is incremented by 1, and 5 is used for the milliseconds. <pre><code>theBigDay = new Date(); theBigDay.setMilliseconds(100); </code></pre> Sets the minutes (0-59) for a specified date according to local time. If you do not specify the <code>secondsValue</code> and <code>msValue</code> parameters, the values returned from <code>getSeconds</code> and <code>getMilliseconds</code> methods are used. If a parameter you specify is outside of the expected range, <code>setMinutes</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 100 for <code>secondsValue</code>, the minutes (<code>minutesValue</code>) will be incremented by 1 (minutesValue + 1), and 40 will be used for seconds. <pre><code>theBigDay.setMinutes(45) </code></pre> Sets the month (0-11) for a specified date according to local time. If you do not specify the <code>dayValue</code> parameter, the value returned from the <code>getDate</code> method is used. If a parameter you specify is outside of the expected range, <code>setMonth</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 15 for <code>monthValue</code>, the year will be incremented by 1 (year + 1), and 3 will be used for month. <pre><code>theBigDay.setMonth(6) </code></pre> Sets the seconds (0-59) for a specified date according to local time. If you do not specify the <code>msValue</code> parameter, the value returned from the <code>getMilliseconds</code> method is used. If a parameter you specify is outside of the expected range, <code>setSeconds</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 100 for <code>secondsValue</code>, the minutes stored in the <code>Date</code> object will be incremented by 1, and 40 will be used for seconds. <pre><code>theBigDay.setSeconds(30) </code></pre> Sets the Date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC, allowing for negative numbers for times prior. Use the <code>setTime</code> method to help assign a date and time to another <code>Date</code> object. <pre><code>theBigDay = new Date("July 1, 1999") sameAsBigDay = new Date() sameAsBigDay.setTime(theBigDay.getTime()) </code></pre> Sets the day of the month (1-31) for a specified date according to universal time. If a parameter you specify is outside of the expected range, <code>setUTCDate</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 40 for <code>dayValue</code>, and the month stored in the <code>Date</code> object is June, the day will be changed to 10 and the month will be incremented to July. <pre><code>theBigDay = new Date(); theBigDay.setUTCDate(20); </code></pre> Sets the full year (4 digits for 4-digit years) for a specified date according to universal time. If you do not specify the <code>monthValue</code> and <code>dayValue</code> parameters, the values returned from the <code>getMonth</code> and <code>getDate</code> methods are used. If a parameter you specify is outside of the expected range, <code>setUTCFullYear</code> attempts to update the other parameters and the date information in the <code>Date</code> object accordingly. For example, if you specify 15 for <code>monthValue</code>, the year is incremented by 1 (year + 1), and 3 is used for the month. <pre><code>theBigDay = new Date(); theBigDay.setUTCFullYear(1997); </code></pre> Sets the hour (0-23) for a specified date according to universal time. If you do not specify the <code>minutesValue</code>, <code>secondsValue</code>, and <code>msValue</code> parameters, the values returned from the <code>getUTCMinutes</code>, <code>getUTCSeconds</code>, and <code>getUTCMilliseconds</code> methods are used. If a parameter you specify is outside of the expected range, <code>setUTCHours</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 100 for <code>secondsValue</code>, the minutes will be incremented by 1 (min + 1), and 40 will be used for seconds. <pre><code>theBigDay = new Date(); theBigDay.setUTCHours(8); </code></pre> Sets the milliseconds (0-999) for a specified date according to universal time. If a parameter you specify is outside of the expected range, <code>setUTCMilliseconds</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 1100 for <code>millisecondsValue</code>, the seconds stored in the Date object will be incremented by 1, and 100 will be used for milliseconds. <pre><code>theBigDay = new Date(); theBigDay.setUTCMilliseconds(500); </code></pre> Sets the minutes (0-59) for a specified date according to universal time. If you do not specify the <code>secondsValue</code> and <code>msValue</code> parameters, the values returned from <code>getUTCSeconds</code> and <code>getUTCMilliseconds</code> methods are used. If a parameter you specify is outside of the expected range, <code>setUTCMinutes</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 100 for <code>secondsValue</code>, the minutes (<code>minutesValue</code>) will be incremented by 1 (<code>minutesValue</code> + 1), and 40 will be used for seconds. <pre><code>theBigDay = new Date(); theBigDay.setUTCMinutes(43); </code></pre> Sets the month (0-11) for a specified date according to universal time. If you do not specify the <code>dayValue</code> parameter, the value returned from the <code>getUTCDate</code> method is used. If a parameter you specify is outside of the expected range, <code>setUTCMonth</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 15 for <code>monthValue</code>, the year will be incremented by 1 (year + 1), and 3 will be used for month. <pre><code>theBigDay = new Date(); theBigDay.setUTCMonth(11); </code></pre> Sets the seconds (0-59) for a specified date according to universal time. If you do not specify the <code>msValue</code> parameter, the value returned from the <code>getUTCMilliseconds</code> methods is used. If a parameter you specify is outside of the expected range, <code>setUTCSeconds</code> attempts to update the date information in the <code>Date</code> object accordingly. For example, if you use 100 for <code>secondsValue</code>, the minutes stored in the <code>Date</code> object will be incremented by 1, and 40 will be used for seconds. <pre><code>theBigDay = new Date(); theBigDay.setUTCSeconds(20); </code></pre> Returns the "date" portion of the Date as a human-readable string in American English. <a href="#!/api/Date" rel="Date" class="docClass">Date</a> instances refer to a specific point in time. Calling <code>toString</code> will return the date formatted in a human readable form in American English. In SpiderMonkey, this consists of the date portion (day, month, and year) followed by the time portion (hours, minutes, seconds, and time zone). Sometimes it is desirable to obtain a string of the date portion; such a thing can be accomplished with the <code>toDateString</code> method. The <code>toDateString</code> method is especially useful because compliant engines implementing ECMA-262 may differ in the string obtained from <code>toString</code> for <code>Date</code> objects, as the format is implementation- dependent and simple string slicing approaches may not produce consistent results across multiple engines. <pre><code>var d = new Date(1993, 6, 28, 14, 39, 7); println(d.toString()); // prints Wed Jul 28 1993 14:39:07 GMT-0600 (PDT) println(d.toDateString()); // prints Wed Jul 28 1993 </code></pre> Returns the "date" portion of the Date as a string, using the current locale's conventions. The <code>toLocaleDateString</code> method relies on the underlying operating system in formatting dates. It converts the date to a string using the formatting convention of the operating system where the script is running. For example, in the United States, the month appears before the date (04/15/98), whereas in Germany the date appears before the month (15.04.98). If the operating system is not year-2000 compliant and does not use the full year for years before 1900 or over 2000, <code>toLocaleDateString</code> returns a string that is not year-2000 compliant. <code>toLocaleDateString</code> behaves similarly to <code>toString</code> when converting a year that the operating system does not properly format. Methods such as <code>getDate</code>, <code>getMonth</code>, and <code>getFullYear</code> give more portable results than <code>toLocaleDateString</code>. Use <code>toLocaleDateString</code> when the intent is to display to the user a string formatted using the regional format chosen by the user. Be aware that this method, due to its nature, behaves differently depending on the operating system and on the user's settings. In the following example, <code>today</code> is a <code>Date</code> object: <pre><code>today = new Date(95,11,18,17,28,35) //months are represented by 0 to 11 today.toLocaleDateString() </code></pre> In this example, <code>toLocaleDateString</code> returns a string value that is similar to the following form. The exact format depends on the platform, locale and user's settings. <pre><code>12/18/95 </code></pre> You shouldn't use this method in contexts where you rely on a particular format or locale. <pre><code>"Last visit: " + someDate.toLocaleDateString(); // Good example "Last visit was at " + someDate.toLocaleDateString(); // Bad example </code></pre> Converts a date to a string, using the current locale's conventions. Overrides the <code><a href="#!/api/Object-method-toLocaleString" rel="Object-method-toLocaleString" class="docClass">Object.toLocaleString</a></code> method. The <code>toLocaleString</code> method relies on the underlying operating system in formatting dates. It converts the date to a string using the formatting convention of the operating system where the script is running. For example, in the United States, the month appears before the date (04/15/98), whereas in Germany the date appears before the month (15.04.98). If the operating system is not year-2000 compliant and does not use the full year for years before 1900 or over 2000, <code>toLocaleString</code> returns a string that is not year-2000 compliant. <code>toLocaleString</code> behaves similarly to <code>toString</code> when converting a year that the operating system does not properly format. Methods such as <code>getDate</code>, <code>getMonth</code>, <code>getFullYear</code>, <code>getHours</code>, <code>getMinutes</code>, and <code>getSeconds</code> give more portable results than <code>toLocaleString</code>. Use <code>toLocaleString</code> when the intent is to display to the user a string formatted using the regional format chosen by the user. Be aware that this method, due to its nature, behaves differently depending on the operating system and on the user's settings. In the following example, <code>today</code> is a <code>Date</code> object: <pre><code>today = new Date(95,11,18,17,28,35); //months are represented by 0 to 11 today.toLocaleString(); </code></pre> In this example, <code>toLocaleString</code> returns a string value that is similar to the following form. The exact format depends on the platform, locale and user's settings. <pre><code>12/18/95 17:28:35 </code></pre> You shouldn't use this method in contexts where you rely on a particular format or locale. <pre><code>"Last visit: " + someDate.toLocaleString(); // Good example "Last visit was at " + someDate.toLocaleString(); // Bad example </code></pre> Returns the "time" portion of the Date as a string, using the current locale's conventions. The <code>toLocaleTimeString</code> method relies on the underlying operating system in formatting dates. It converts the date to a string using the formatting convention of the operating system where the script is running. For example, in the United States, the month appears before the date (04/15/98), whereas in Germany the date appears before the month (15.04.98). Methods such as <code>getHours</code>, <code>getMinutes</code>, and <code>getSeconds</code> give more consistent results than <code>toLocaleTimeString</code>. Use <code>toLocaleTimeString</code> when the intent is to display to the user a string formatted using the regional format chosen by the user. Be aware that this method, due to its nature, behaves differently depending on the operating system and on the user's settings. In the following example, <code>today</code> is a <code>Date</code> object: <pre><code>today = new Date(95,11,18,17,28,35) //months are represented by 0 to 11 today.toLocaleTimeString() </code></pre> In this example, <code>toLocaleTimeString</code> returns a string value that is similar to the following form. The exact format depends on the platform. <pre><code>17:28:35 </code></pre> You shouldn't use this method in contexts where you rely on a particular format or locale. <pre><code>"Last visit: " + someDate.toLocaleTimeString(); // Good example "Last visit was at " + someDate.toLocaleTimeString(); // Bad example </code></pre> Returns a string representing the specified Date object. Overrides the <code>Object.prototype.toString</code> method. The <code>Date</code> object overrides the toString method of the Object object; it does not inherit <code><a href="#!/api/Object-method-toString" rel="Object-method-toString" class="docClass">Object.toString</a></code>. For <code>Date</code> objects, the <code>toString</code> method returns a string representation of the object. <code>toString</code> always returns a string representation of the date in American English. JavaScript calls the <code>toString</code> method automatically when a date is to be represented as a text value or when a date is referred to in a string concatenation. The following assigns the <code>toString</code> value of a <code>Date</code> object to <code>myVar</code>: <pre><code>x = new Date(); myVar=x.toString(); //assigns a value to myVar similar to: //Mon Sep 28 1998 14:36:22 GMT-0700 (Pacific Daylight Time) </code></pre> Returns the "time" portion of the Date as a human-readable string. <a href="#!/api/Date" rel="Date" class="docClass">Date</a> instances refer to a specific point in time. Calling <code>toString</code> will return the date formatted in a human readable form in American English. In SpiderMonkey, this consists of the date portion (day, month, and year) followed by the time portion (hours, minutes, seconds, and time zone). Sometimes it is desirable to obtain a string of the time portion; such a thing can be accomplished with the <code>toTimeString</code> method. The <code>toTimeString</code> method is especially useful because compliant engines implementing ECMA-262 may differ in the string obtained from <code>toString</code> for <code>Date</code> objects, as the format is implementation- dependent; simple string slicing approaches may not produce consistent results across multiple engines. <pre><code>var d = new Date(1993, 6, 28, 14, 39, 7); println(d.toString()); // prints Wed Jul 28 1993 14:39:07 GMT-0600 (PDT) println(d.toTimeString()); // prints 14:39:07 GMT-0600 (PDT) </code></pre> Converts a date to a string, using the universal time convention. The value returned by <code>toUTCString</code> is a readable string in American English in the UTC time zone. The format of the return value may vary according to the platform. <pre><code>var today = new Date(); var UTCstring = today.toUTCString(); // Mon, 03 Jul 2006 21:44:38 GMT </code></pre> Returns the primitive value of a Date object. Overrides the Object.prototype.valueOf method. The <code>valueOf</code> method returns the primitive value of a <code>Date</code> object as a number data type, the number of milliseconds since midnight 01 January, 1970 UTC. This method is functionally equivalent to the <code>getTime</code> method. This method is usually called internally by JavaScript and not explicitly in code. <pre><code>x = new Date(56, 6, 17); myVar = x.valueOf(); //assigns -424713600000 to myVar </code></pre> Creates new Component. Config object.

Indicates whether or not to calculate the number of categories (ticks and labels) when there is not enough room to display all labels on the axis. If set to true, the axis will determine the number of categories to plot. If not, all categories will be plotted. A list of category names to display along this axis. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Renders the axis into the screen and updates its position. Renders an horizontal and/or vertical grid into the Surface. Renders the labels in the axes. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Updates the <a href="#!/api/Ext.chart.axis.Axis-cfg-title" rel="Ext.chart.axis.Axis-cfg-title" class="docClass">title</a> of this axis. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates new Axis. Config options.

Indicates whether to extend maximum beyond data's maximum to the nearest majorUnit. Indicates whether to extend the minimum beyond data's minimum to the nearest majorUnit. The number of decimals to round the value to. The maximum value drawn by the axis. If not set explicitly, the axis maximum will be calculated automatically. The minimum value drawn by the axis. If not set explicitly, the axis minimum will be calculated automatically. Indicates the position of the axis relative to the chart Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Renders the axis into the screen and updates its position. Renders an horizontal and/or vertical grid into the Surface. Renders the labels in the axes. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Updates the <a href="#!/api/Ext.chart.axis.Axis-cfg-title" rel="Ext.chart.axis.Axis-cfg-title" class="docClass">title</a> of this axis. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates new Axis. Config options.

Setting this property to <code>true</code> causes the <a href="#!/api/Ext.AbstractComponent-method-isLayoutRoot" rel="Ext.AbstractComponent-method-isLayoutRoot" class="docClass">isLayoutRoot</a> method to return <code>true</code> and stop the search for the top-most component for a layout. Indicates whether or not the component can be dragged. Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which were inserted as descendant items of floating Containers. Floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a> will not have a <code>floatParent</code> property. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are child items of a Container, the floatParent will be the floating ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides a <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> which provides z-indexing services for all its descendant floating Components. For example, the dropdown <a href="#!/api/Ext.view.BoundList" rel="Ext.view.BoundList" class="docClass">BoundList</a> of a ComboBox which is in a Window will have the Window as its <code>floatParent</code> See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">zIndexManager</a> Indicates the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the <a href="#!/api/Ext.AbstractComponent-cfg-frame" rel="Ext.AbstractComponent-cfg-frame" class="docClass">frame</a> config. This is an object containing the frame width in pixels for all four sides of the Component containing the following properties: This is an internal flag that you use when creating custom components. By default this is set to true which means that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false since they want to implement custom disable logic. This Component's owner <a href="#!/api/Ext.container.Container" rel="Ext.container.Container" class="docClass">Container</a> (is set automatically when this Component is added to a Container). Note: to access items within the Container see <a href="#!/api/Ext.AbstractComponent-cfg-itemId" rel="Ext.AbstractComponent-cfg-itemId" class="docClass">itemId</a>. Indicates whether or not the component has been rendered. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components after they have been rendered. A reference to the ZIndexManager which is managing this Component's z-index. The <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> maintains a stack of floating Component z-indices, and also provides a single modal mask which is insert just beneath the topmost visible modal floating Component. Floating Components may be <a href="#!/api/Ext.Component-method-toFront" rel="Ext.Component-method-toFront" class="docClass">brought to the front</a> or <a href="#!/api/Ext.Component-method-toBack" rel="Ext.Component-method-toBack" class="docClass">sent to the back</a> of the z-index stack. This defaults to the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> for floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a>. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found which is floating, or if not found the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> is used. See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-floatParent" rel="Ext.Component-property-floatParent" class="docClass">floatParent</a> Adds each argument passed to this method to the childEls array. Adds a CSS class to the top level element representing this component. Adds a CSS class to the top level element representing this component. Adds a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-addUIClsToElement" rel="Ext.AbstractComponent-method-addUIClsToElement" class="docClass">addUIClsToElement</a> and adds to all elements of this component. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Save a property to the given state object if it is not its default or configured value. Add events that will trigger the state to be saved. If the first argument is an array, each element of that array is the name of a state event. Otherwise, each argument passed to this method is the name of a state event. Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element. Called by the layout system when the Component has been layed out. Aligns this floating Component to the specified element Perform custom animation on this object. This method is applicable to both the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a> class and the <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a> class. It performs animated transitions of certain properties of this object over a specified timeline. The sole parameter is an object which specifies start property values, end property values, and properties which describe the timeline. <h3>Animating an <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a></h3> When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The page X position in pixels.</li> <li><code>y</code> - The page Y position in pixels</li> <li><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</li> <li><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</li> <li><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</li> <li><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</li> <li><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</li> <li><code>scrollTop</code> - The element's <code>scrollLeft</code> value.</li> <li><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</li> </ul> Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components. <h3>Animating a <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a></h3> When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The Component's page X position in pixels.</li> <li><code>y</code> - The Component's page Y position in pixels</li> <li><code>left</code> - The Component's <code>left</code> value in pixels.</li> <li><code>top</code> - The Component's <code>top</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.</li> </ul> For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct: <pre><code>myWindow = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>', { title: 'Test Component animation', width: 500, height: 300, layout: { type: 'hbox', align: 'stretch' }, items: [{ title: 'Left: 33%', margins: '5 0 5 5', flex: 1 }, { title: 'Left: 66%', margins: '5 5 5 5', flex: 2 }] }); myWindow.show(); myWindow.header.el.on('click', function() { myWindow.animate({ to: { width: (myWindow.getWidth() == 500) ? 700 : 500, height: (myWindow.getHeight() == 300) ? 400 : 300, } }); }); </code></pre> For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation. Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object. Utility wrapper that suspends layouts of all components for the duration of a given function. Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed. Binds a store to this instance. Binds listeners for this component to the store. By default it will add anything bound by the getStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling. Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Center this Component in its container. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Clone the current component using the original config values passed into this instance by default. Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their appropriate instances. Create the Surface instance. Resolves the correct Surface implementation to instantiate based on the 'enginePriority' config. Once the Surface instance is created you can use the handle to that instance to add sprites. For example: <pre><code>drawComponent.surface.add(sprite); </code></pre> Destroys the Component. Disable the component. Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body This method needs to be called whenever you change something on this component that requires the Component's layout to be recalculated. Moves this floating Component into a constrain region. By default, this Component is constrained to be within the container it was added to, or the element it was rendered to. An alternative constraint may be passed. Enable the component Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Ensures that this component is attached to <code>document.body</code>. If the component was rendered to Ext.getDetachedBody, then it will be appended to <code>document.body</code>. Any configured position is also restored. Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. Find a container above this component at any level by xtype or class See also the <a href="#!/api/Ext.Component-method-up" rel="Ext.Component-method-up" class="docClass">up</a> method. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Try to focus this component. Forces this component to redo its componentLayout. Returns the current animation if this object has any effects actively running or queued, else returns false. Gets the current box measurements of the component's underlying element. Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. Retrieves the top level element representing this component. Gets the current height of the component's underlying element. Retrieves the id of this component. Will autogenerate an id if one has not already been set. This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore. Gets the <a href="#!/api/Ext.ComponentLoader" rel="Ext.ComponentLoader" class="docClass">Ext.ComponentLoader</a> for this Component. Retrieves a plugin by its pluginId which has been bound to this component. Gets the current XY position of the component's underlying element. Gets the current size of the component's underlying element. Returns an object that describes how this component's width and height is managed. These objects are shared and should not be modified. The supplied default state gathering method for the AbstractComponent class. This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code> state. Subclasses which implement more complex state should call the superclass's implementation, and apply their state to the result if this basic state is to be saved. Note that Component state will only be saved if the Component has a <a href="#!/api/Ext.AbstractComponent-cfg-stateId" rel="Ext.AbstractComponent-cfg-stateId" class="docClass">stateId</a> and there as a StateProvider configured for the document. Gets the state id for this object. Gets the current store instance. Gets the listeners to bind to a new store. Gets the current width of the component's underlying element. Gets the xtype for this component as registered with <a href="#!/api/Ext.ComponentManager" rel="Ext.ComponentManager" class="docClass">Ext.ComponentManager</a>. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXType()); // alerts 'textfield' </code></pre> Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXTypes()); // alerts 'component/field/textfield' </code></pre> Returns the current animation if this object has any effects actively running or queued, else returns false. Checks if the specified CSS class exists on this element's DOM node. Checks to see if this object has any listeners for a specified event Checks if there is currently a specified uiCls Hides this Component, setting it to invisible using the configured <a href="#!/api/Ext.Component-cfg-hideMode" rel="Ext.Component-cfg-hideMode" class="docClass">hideMode</a>. The initComponent template method is an important initialization step for a Component. It is intended to be implemented by each subclass of <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to <a href="#!/api/Ext.Base-method-callParent" rel="Ext.Base-method-callParent" class="docClass">callParent</a> in order to ensure that the parent class' initComponent method is also called. All config options passed to the constructor are applied to <code>this</code> before initComponent is called, so you can simply access them with <code>this.someOption</code>. The following example demonstrates using a dynamic string for the text of a button at the time of instantiation of the class. <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('DynamicButtonText', { extend: '<a href="#!/api/Ext.button.Button" rel="Ext.button.Button" class="docClass">Ext.button.Button</a>', initComponent: function() { this.text = new Date(); this.renderTo = <a href="#!/api/Ext-method-getBody" rel="Ext-method-getBody" class="docClass">Ext.getBody</a>(); this.callParent(); } }); <a href="#!/api/Ext-method-onReady" rel="Ext-method-onReady" class="docClass">Ext.onReady</a>(function() { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('DynamicButtonText'); }); </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Tests whether this Component matches the selector string. Determines whether this component is the descendant of a particular container. Method to determine whether this Component is currently disabled. Method to determine whether this Component is draggable. Method to determine whether this Component is droppable. Method to determine whether this Component is floating. Method to determine whether this Component is currently set to hidden. Determines whether this Component is the root of a layout. This returns <code>true</code> if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, <code>false</code> is returned and its owner will be considered as the next candidate for the layout root. Setting the <a href="#!/api/Ext.AbstractComponent-property-_isLayoutRoot" rel="Ext.AbstractComponent-property-_isLayoutRoot" class="docClass">_isLayoutRoot</a> property to <code>true</code> causes this method to always return <code>true</code>. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run. Returns true if layout is suspended for this component. This can come from direct suspension of this component's layout activity (suspendLayouts) or if one of this component's containers is suspended. Returns true if this component is visible. Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); var isText = t.isXType('textfield'); // true var isBoxSubclass = t.isXType('field'); // true, descended from <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> var isBoxInstance = t.isXType('field', true); // false, not a direct <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> instance </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Returns the next node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextSibling" rel="Ext.AbstractComponent-method-nextSibling" class="docClass">nextSibling</a>. Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>next()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextNode" rel="Ext.AbstractComponent-method-nextNode" class="docClass">nextNode</a> Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Template method, it is called when a new store is bound to the current instance. Template method, it is called when an existing store is unbound from the current instance. Returns the previous node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousSibling" rel="Ext.AbstractComponent-method-previousSibling" class="docClass">previousSibling</a>. Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>prev()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousNode" rel="Ext.AbstractComponent-method-previousNode" class="docClass">previousNode</a> Redraws the chart. If animations are set this will animate the chart too. Called by Component#doAutoRender Register a Container configured <code>floating: true</code> with this Component's <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a>. Components added in ths way will not participate in any layout, but will be rendered upon first show in the way that <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Window</a>s are. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. 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. Removes a CSS class from the top level element representing this component. Removes a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-removeUIClsFromElement" rel="Ext.AbstractComponent-method-removeUIClsFromElement" class="docClass">removeUIClsFromElement</a> and removes it from all elements of this component. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Method which removes a specified UI + uiCls from the components element. The cls which is added to the element will be: <code>this.baseCls + '-' + ui</code> Restores the zoom to the original value. This can be used to reset the previous zoom state set by <code>setZoom</code>. For example: <pre><code>myChart.restoreZoom(); </code></pre> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Saves the chart by either triggering a download or returning a string containing the chart data. The action depends on the export type specified in the passed configuration. Possible export types: - "image/png" - "image/svg+xml" Other configuration properties: - width Example usage: chart.save({ <pre><code> type: 'image/png' </code></pre> }); Conditionally saves a single property from this object to the given state object. The idea is to only save state which has changed from the initial state so that current software settings do not override future software settings. Only those values that are user-changed state should be saved. Scrolls this Component's target element by the passed delta values, optionally animating. All of the following are equivalent: <pre><code> comp.scrollBy(10, 10, true); comp.scrollBy([10, 10], true); comp.scrollBy({ x: 10, y: 10 }, true); </code></pre> Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of <a href="#!/api/Ext.util.Animate-method-syncFx" rel="Ext.util.Animate-method-syncFx" class="docClass">syncFx</a>. This method is called internally by <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">Ext.ZIndexManager</a> to signal that a floating Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack. If a Window is superceded by another Window, deactivating it hides its shadow. This method also fires the <a href="#!/api/Ext.Component-event-activate" rel="Ext.Component-event-activate" class="docClass">activate</a> or <a href="#!/api/Ext.Component-event-deactivate" rel="Ext.Component-event-deactivate" class="docClass">deactivate</a> event depending on which action occurred. Sets the overflow on the content element of the component. Enable or disable the component. Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default) Sets the height of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method allows you to show or hide a LoadMask on top of this component. Sets the overflow x/y on the content element of the component. The x/y overflow values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the value is 'hidden'. Passing null for one of the values will erase the inline style. Passing <code>undefined</code> will preserve the current value. Sets the page XY position of the component. To set the left and top instead, use <a href="#!/api/Ext.Component-method-setPosition" rel="Ext.Component-method-setPosition" class="docClass">setPosition</a>. This method fires the <a href="#!/api/Ext.Component-event-move" rel="Ext.Component-event-move" class="docClass">move</a> event. Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the <a href="#!/api/Ext.AbstractComponent-event-move" rel="Ext.AbstractComponent-event-move" class="docClass">move</a> event. Sets the width and height of this Component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method can accept either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>. Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCls set on the component and rename them so they include the new UI Convenience function to hide or show this component by boolean. Sets the width of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. Zooms the chart to the specified selection range. Can be used with a selection mask. For example: <pre><code>items: { xtype: 'chart', animate: true, store: store1, mask: 'horizontal', listeners: { select: { fn: function(me, selection) { me.setZoom(selection); me.mask.hide(); } } } } </code></pre> Shows this Component, rendering it first if <a href="#!/api/Ext.Component-cfg-autoRender" rel="Ext.Component-cfg-autoRender" class="docClass">autoRender</a> or <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> are <code>true</code>. After being shown, a <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Component (such as a <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>), is activated it and brought to the front of its <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">z-index stack</a>. Displays component at specific xy position. A floating component (like a menu) is positioned relative to its ownerCt if any. Useful for popping up a context menu: <pre><code>listeners: { itemcontextmenu: function(view, record, item, index, event, options) { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.menu.Menu" rel="Ext.menu.Menu" class="docClass">Ext.menu.Menu</a>', { width: 100, height: 100, margin: '0 0 10 0', items: [{ text: 'regular item 1' },{ text: 'regular item 2' },{ text: 'regular item 3' }] }).showAt(event.getXY()); } } </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of <a href="#!/api/Ext.util.Animate-method-sequenceFx" rel="Ext.util.Animate-method-sequenceFx" class="docClass">sequenceFx</a>. Sends this Component to the back of (lower z-index than) any other visible windows Brings this floating Component to the front of any other visible, floating Components managed by the same <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> If this Component is modal, inserts the modal mask just below this Component in the z-index stack. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Unbinds listeners from this component to the store. By default it will remove anything bound by the bindStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling. Walks up the <code>ownerCt</code> axis looking for an ancestor Container which matches the passed simple selector. Example: <pre><code>var owningTabPanel = grid.up('tabpanel'); </code></pre> Update the content area of a component. Sets the current box measurements of the component's underlying element. Updates this component's layout. If this update effects this components <a href="#!/api/Ext.AbstractComponent-property-ownerCt" rel="Ext.AbstractComponent-property-ownerCt" class="docClass">ownerCt</a>, that component's <code>updateLayout</code> method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates new Legend. Config object.

Whether the legend box is oriented vertically, i.e. if it is on the left or right side or floating. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates new MixedCollection. Specify <tt>true</tt> if the <a href="#!/api/Ext.util.MixedCollection-method-addAll" rel="Ext.util.MixedCollection-method-addAll" class="docClass">addAll</a> function should add function references to the collection. Defaults to <tt>false</tt>. A function that can accept an item of the type(s) stored in this MixedCollection and return the key value for that item. This is used when available to look up the key on items that were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is equivalent to providing an implementation for the <a href="#!/api/Ext.util.MixedCollection-method-getKey" rel="Ext.util.MixedCollection-method-getKey" class="docClass">getKey</a> method.

The default sort direction to use if one is not specified. Flag denoting that this object is sortable. Always true. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The property in each item that contains the data to sort. The collection of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Sorters</a> currently applied to this Store Adds an item to the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-add" rel="Ext.util.AbstractMixedCollection-event-add" class="docClass">add</a> event when complete. Adds all elements of an Array or an Object to the collection. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Perform custom animation on this object. This method is applicable to both the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a> class and the <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a> class. It performs animated transitions of certain properties of this object over a specified timeline. The sole parameter is an object which specifies start property values, end property values, and properties which describe the timeline. <h3>Animating an <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a></h3> When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The page X position in pixels.</li> <li><code>y</code> - The page Y position in pixels</li> <li><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</li> <li><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</li> <li><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</li> <li><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</li> <li><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</li> <li><code>scrollTop</code> - The element's <code>scrollLeft</code> value.</li> <li><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</li> </ul> Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components. <h3>Animating a <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a></h3> When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The Component's page X position in pixels.</li> <li><code>y</code> - The Component's page Y position in pixels</li> <li><code>left</code> - The Component's <code>left</code> value in pixels.</li> <li><code>top</code> - The Component's <code>top</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.</li> </ul> For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct: <pre><code>myWindow = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>', { title: 'Test Component animation', width: 500, height: 300, layout: { type: 'hbox', align: 'stretch' }, items: [{ title: 'Left: 33%', margins: '5 0 5 5', flex: 1 }, { title: 'Left: 66%', margins: '5 5 5 5', flex: 2 }] }); myWindow.show(); myWindow.header.el.on('click', function() { myWindow.animate({ to: { width: (myWindow.getWidth() == 500) ? 700 : 500, height: (myWindow.getHeight() == 300) ? 400 : 300, } }); }); </code></pre> For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all items from the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-clear" rel="Ext.util.AbstractMixedCollection-event-clear" class="docClass">clear</a> event when complete. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Creates a shallow copy of this collection Collects unique values of a particular property in this MixedCollection Returns true if the collection contains the passed Object as an item. Returns true if the collection contains the passed Object as a key. Creates all the individual sprites for this legend item Destroys the SpriteGroup Executes the specified function once for every item in the collection, passing the following arguments: <div class="mdetail-params"><ul> <li>item : MixedThe collection item</li> <li>index : NumberThe item's index</li> <li>length : NumberThe total number of items in the collection</li> </ul></div> The function should return a boolean value. Returning false from the function will stop the iteration. Executes the specified function once for every key in the collection, passing each key, and its associated item as the first two parameters. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Filters the objects in this collection by a set of <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Filter</a>s, or by a single property/value pair with optional parameters for substring matching and case sensitivity. See <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Filter</a> for an example of using Filter objects (preferred). Alternatively, MixedCollection can be easily filtered by property like this: <pre><code>//create a simple store with a few people defined var people = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(); people.addAll([ {id: 1, age: 25, name: 'Ed'}, {id: 2, age: 24, name: 'Tommy'}, {id: 3, age: 24, name: 'Arne'}, {id: 4, age: 26, name: 'Aaron'} ]); //a new MixedCollection containing only the items where age == 24 var middleAged = people.filter('age', 24); </code></pre> Filter by a function. Returns a new collection that has been filtered. The passed function will be called with each object in the collection. If the function returns true, the value is included otherwise it is filtered. Returns the first item in the collection which elicits a true return value from the passed selection function. Finds the index of the first matching object in this collection by a specific property/value. Find the index of the first matching object in this collection by a function. If the function returns true it is considered a match. Calculates the insertion index of the new item based upon the comparison function passed, or the current sort order. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns the first item in the collection. Returns a comparator function which compares two items and returns -1, 0, or 1 depending on the currently defined set of <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a>. If there are no <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a> defined, it returns a function which returns <code>0</code> meaning that no sorting will occur. Returns the item associated with the passed key OR index. Key has priority over index. This is the equivalent of calling <a href="#!/api/Ext.util.AbstractMixedCollection-method-getByKey" rel="Ext.util.AbstractMixedCollection-method-getByKey" class="docClass">getByKey</a> first, then if nothing matched calling <a href="#!/api/Ext.util.AbstractMixedCollection-method-getAt" rel="Ext.util.AbstractMixedCollection-method-getAt" class="docClass">getAt</a>. Returns the current animation if this object has any effects actively running or queued, else returns false. Returns the item at the specified index. Returns the group bounding box. Behaves like <a href="#!/api/Ext.draw.Sprite-method-getBBox" rel="Ext.draw.Sprite-method-getBBox" class="docClass">Ext.draw.Sprite.getBBox</a> method. Returns the item associated with the passed key. Returns the number of items in the collection. MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation simply returns <code>item.id</code> but you can provide your own implementation to return a different value as in the following examples: <pre><code>// normal way var mc = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(); mc.add(someEl.dom.id, someEl); mc.add(otherEl.dom.id, otherEl); //and so on // using getKey var mc = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(); mc.getKey = function(el){ return el.dom.id; }; mc.add(someEl); mc.add(otherEl); // or via the constructor var mc = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(false, function(el){ return el.dom.id; }); mc.add(someEl); mc.add(otherEl); </code></pre> Returns a range of items in this collection Returns the current animation if this object has any effects actively running or queued, else returns false. Checks to see if this object has any listeners for a specified event Hides all sprites. If the first parameter of the method is true then a redraw will be forced for each sprite. Returns index within the collection of the passed Object. Returns index within the collection of the passed key. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization. Inserts an item at the specified index in the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-add" rel="Ext.util.AbstractMixedCollection-event-add" class="docClass">add</a> event when complete. Returns the last item in the collection. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Remove an item from the collection. Remove all items in the passed array from the collection. Remove an item from a specified index in the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-remove" rel="Ext.util.AbstractMixedCollection-event-remove" class="docClass">remove</a> event when complete. Removed an item associated with the passed key fom the collection. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Reorders each of the items based on a mapping from old index to new index. Internally this just translates into a sort. The 'sort' event is fired whenever reordering has occured. Replaces an item in the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-replace" rel="Ext.util.AbstractMixedCollection-event-replace" class="docClass">replace</a> event when complete. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of <a href="#!/api/Ext.util.Animate-method-syncFx" rel="Ext.util.Animate-method-syncFx" class="docClass">syncFx</a>. Iterates through all sprites calling <code>setAttributes</code> on each one. For more information <a href="#!/api/Ext.draw.Sprite" rel="Ext.draw.Sprite" class="docClass">Ext.draw.Sprite</a> provides a description of the attributes that can be set with this method. Shows all sprites. If the first parameter of the method is true then a redraw will be forced for each sprite. Sorts the data in the Store by one or more of its properties. Example usage: <pre><code>//sort by a single field myStore.sort('myField', 'DESC'); //sorting by multiple fields myStore.sort([ { property : 'age', direction: 'ASC' }, { property : 'name', direction: 'DESC' } ]); </code></pre> Internally, Store converts the passed arguments into an array of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> instances, and delegates the actual sorting to its internal <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>. When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code: <pre><code>store.sort('myField'); store.sort('myField'); </code></pre> Is equivalent to this code, because Store handles the toggling automatically: <pre><code>store.sort('myField', 'ASC'); store.sort('myField', 'DESC'); </code></pre> Sorts the collection by a single sorter function Sorts this collection by keys. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Collects all of the values of the given property and returns their sum Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of <a href="#!/api/Ext.util.Animate-method-sequenceFx" rel="Ext.util.Animate-method-sequenceFx" class="docClass">sequenceFx</a>. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Update the positions of all this item's sprites to match the root position of the legend box. Creates new Mask. Config object.

Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Restores the zoom to the original value. This can be used to reset the previous zoom state set by <code>setZoom</code>. For example: <pre><code>myChart.restoreZoom(); </code></pre> Zooms the chart to the specified selection range. Can be used with a selection mask. For example: <pre><code>items: { xtype: 'chart', animate: true, store: store1, mask: 'horizontal', listeners: { select: { fn: function(me, selection) { me.setZoom(selection); me.mask.hide(); } } } } </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The field used to access the x axis value from the items from the data source. The field used to access the y-axis value from the items from the data source. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Iterates over a given record's values for each of this series's yFields, executing a given function for each value. Any yFields that have been combined via legend drag-drop will be treated as a single value. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns the color of the series (to be displayed as color for the series legend item). Calculate the min and max values for this series's xField. Calculate the min and max values for this series's yField(s). Takes into account yField combinations, exclusions, and stacking. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Returns an array of functions, each of which returns the value of the yField corresponding to function's index in the array, for a given record (each function takes the record as its only argument.) If yFields have been combined by the user via legend drag-drop, this list of accessors will be kept in sync with those combinations. Returns the number of yField values, taking into account fields combined via legend drag-drop. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the specified item. If no item is provided the whole series will be highlighted. Highlight this entire series. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlights the specified item. If no item is provided it will un-highlight the entire series. UnHighlight this entire series. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The field used to access the x axis value from the items from the data source. The field used to access the y-axis value from the items from the data source. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Iterates over a given record's values for each of this series's yFields, executing a given function for each value. Any yFields that have been combined via legend drag-drop will be treated as a single value. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns a string with the color to be used for the series legend item. Calculate the min and max values for this series's xField. Calculate the min and max values for this series's yField(s). Takes into account yField combinations, exclusions, and stacking. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Returns an array of functions, each of which returns the value of the yField corresponding to function's index in the array, for a given record (each function takes the record as its only argument.) If yFields have been combined by the user via legend drag-drop, this list of accessors will be kept in sync with those combinations. Returns the number of yField values, taking into account fields combined via legend drag-drop. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The field used to access the x axis value from the items from the data source. The field used to access the y-axis value from the items from the data source. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Iterates over a given record's values for each of this series's yFields, executing a given function for each value. Any yFields that have been combined via legend drag-drop will be treated as a single value. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns a string with the color to be used for the series legend item. Calculate the min and max values for this series's xField. Calculate the min and max values for this series's yField(s). Takes into account yField combinations, exclusions, and stacking. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Returns an array of functions, each of which returns the value of the yField corresponding to function's index in the array, for a given record (each function takes the record as its only argument.) If yFields have been combined by the user via legend drag-drop, this list of accessors will be kept in sync with those combinations. Returns the number of yField values, taking into account fields combined via legend drag-drop. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The field used to access the x axis value from the items from the data source. The field used to access the y-axis value from the items from the data source. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Iterates over a given record's values for each of this series's yFields, executing a given function for each value. Any yFields that have been combined via legend drag-drop will be treated as a single value. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns a string with the color to be used for the series legend item. Calculate the min and max values for this series's xField. Calculate the min and max values for this series's yField(s). Takes into account yField combinations, exclusions, and stacking. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Returns an array of functions, each of which returns the value of the yField corresponding to function's index in the array, for a given record (each function takes the record as its only argument.) If yFields have been combined by the user via legend drag-drop, this list of accessors will be kept in sync with those combinations. Returns the number of yField values, taking into account fields combined via legend drag-drop. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns the color of the series (to be displayed as color for the series legend item). Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Sets the Gauge chart to the current specified value. Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The field used to access the x axis value from the items from the data source. The field used to access the y-axis value from the items from the data source. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Iterates over a given record's values for each of this series's yFields, executing a given function for each value. Any yFields that have been combined via legend drag-drop will be treated as a single value. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns a string with the color to be used for the series legend item. Calculate the min and max values for this series's xField. Calculate the min and max values for this series's yField(s). Takes into account yField combinations, exclusions, and stacking. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Returns an array of functions, each of which returns the value of the yField corresponding to function's index in the array, for a given record (each function takes the record as its only argument.) If yFields have been combined by the user via legend drag-drop, this list of accessors will be kept in sync with those combinations. Returns the number of yField values, taking into account fields combined via legend drag-drop. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns the color of the series (to be displayed as color for the series legend item). Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the specified item. If no item is provided the whole series will be highlighted. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlights the specified item. If no item is provided it will un-highlight the entire series. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns a string with the color to be used for the series legend item. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The field used to access the x axis value from the items from the data source. The field used to access the y-axis value from the items from the data source. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Draws the series for the current chart. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Iterates over a given record's values for each of this series's yFields, executing a given function for each value. Any yFields that have been combined via legend drag-drop will be treated as a single value. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns a string with the color to be used for the series legend item. Calculate the min and max values for this series's xField. Calculate the min and max values for this series's yField(s). Takes into account yField combinations, exclusions, and stacking. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Returns an array of functions, each of which returns the value of the yField corresponding to function's index in the array, for a given record (each function takes the record as its only argument.) If yFields have been combined by the user via legend drag-drop, this list of accessors will be kept in sync with those combinations. Returns the number of yField values, taking into account fields combined via legend drag-drop. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Iterate over each of the records for this series. The default implementation simply iterates through the entire data store, but individual series implementations can override this to provide custom handling, e.g. adding/removing records. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. For a given x/y point relative to the Surface, find a corresponding item from this series, if any. Returns a string with the color to be used for the series legend item. Return the number of records being displayed in this series. Defaults to the number of records in the store; individual series implementations can override to provide custom handling. Checks to see if this object has any listeners for a specified event Hides all the elements in the series. Highlight the given series item. Highlight the given series item. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether the series item at the given index has been excluded, i.e. toggled off in the legend. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Changes the value of the <a href="#!/api/Ext.chart.series.Series-cfg-title" rel="Ext.chart.series.Series-cfg-title" class="docClass">title</a> for the series. Arguments can take two forms: <ul> <li>A single String value: this will be used as the new single title for the series (applies to series with only one yField)</li> <li>A numeric index and a String value: this will set the title for a single indexed yField.</li> </ul> Shows all the elements in the series. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Un-highlight any existing highlights Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates new Component. The configuration options may be specified as either: <ul> <li>an element : it is set as the internal element and its id used as the component id</li> <li>a string : it is assumed to be the id of an existing element and is used as the component id</li> <li>anything else : it is assumed to be a standard config object and is applied to the component</li> </ul>

Defines a class. Retrieve a class by its name. Get the aliases of a class by the class name Get a reference to the class by its alias. Get the class of the provided object; returns null if it's not an instance of any class created with <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>. This is usually invoked by the shorthand <a href="#!/api/Ext-method-getClass" rel="Ext-method-getClass" class="docClass">Ext.getClass</a> <pre><code>var component = new <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a>(); <a href="#!/api/Ext.ClassManager-method-getClass" rel="Ext.ClassManager-method-getClass" class="docClass">Ext.ClassManager.getClass</a>(component); // returns <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> </code></pre> Returns the displayName property or className or object. When all else fails, returns "Anonymous". Get the name of the class by its reference or its instance; usually invoked by the shorthand <a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a> <pre><code><a href="#!/api/Ext.ClassManager-method-getName" rel="Ext.ClassManager-method-getName" class="docClass">Ext.ClassManager.getName</a>(<a href="#!/api/Ext.Action" rel="Ext.Action" class="docClass">Ext.Action</a>); // returns "<a href="#!/api/Ext.Action" rel="Ext.Action" class="docClass">Ext.Action</a>" </code></pre> Get the name of a class by its alias. Get the name of a class by its alternate name. Converts a string expression to an array of matching class names. An expression can either refers to class aliases or class names. Expressions support wildcards: <pre><code> // returns ['<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>'] var window = <a href="#!/api/Ext.ClassManager-method-getNamesByExpression" rel="Ext.ClassManager-method-getNamesByExpression" class="docClass">Ext.ClassManager.getNamesByExpression</a>('widget.window'); // returns ['widget.panel', 'widget.window', ...] var allWidgets = <a href="#!/api/Ext.ClassManager-method-getNamesByExpression" rel="Ext.ClassManager-method-getNamesByExpression" class="docClass">Ext.ClassManager.getNamesByExpression</a>('widget.*'); // returns ['<a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>', 'Ext.data.ArrayProxy', ...] var allData = <a href="#!/api/Ext.ClassManager-method-getNamesByExpression" rel="Ext.ClassManager-method-getNamesByExpression" class="docClass">Ext.ClassManager.getNamesByExpression</a>('Ext.data.*'); </code></pre> Instantiate a class by its alias; usually invoked by the convenient shorthand <a href="#!/api/Ext-method-createByAlias" rel="Ext-method-createByAlias" class="docClass">Ext.createByAlias</a> If <a href="#!/api/Ext.Loader" rel="Ext.Loader" class="docClass">Ext.Loader</a> is <a href="#!/api/Ext.Loader-method-setConfig" rel="Ext.Loader-method-setConfig" class="docClass">enabled</a> and the class has not been defined yet, it will attempt to load the class via synchronous loading. <pre><code>var window = <a href="#!/api/Ext.ClassManager-method-instantiateByAlias" rel="Ext.ClassManager-method-instantiateByAlias" class="docClass">Ext.ClassManager.instantiateByAlias</a>('widget.window', { width: 600, height: 800, ... }); </code></pre> Checks if a class has already been created. Sets a name reference to a class. Register the alias for a class. Creates a namespace and assign the <code>value</code> to the created object <pre><code><a href="#!/api/Ext.ClassManager-method-setNamespace" rel="Ext.ClassManager-method-setNamespace" class="docClass">Ext.ClassManager.setNamespace</a>('MyCompany.pkg.Example', someObject); alert(MyCompany.pkg.Example === someObject); // alerts true </code></pre> Creates new Component. The configuration options may be specified as either: <ul> <li>an element : it is set as the internal element and its id used as the component id</li> <li>a string : it is assumed to be the id of an existing element and is used as the component id</li> <li>anything else : it is assumed to be a standard config object and is applied to the component</li> </ul>

Setting this property to <code>true</code> causes the <a href="#!/api/Ext.AbstractComponent-method-isLayoutRoot" rel="Ext.AbstractComponent-method-isLayoutRoot" class="docClass">isLayoutRoot</a> method to return <code>true</code> and stop the search for the top-most component for a layout. Indicates whether or not the component can be dragged. Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which were inserted as descendant items of floating Containers. Floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a> will not have a <code>floatParent</code> property. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are child items of a Container, the floatParent will be the floating ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides a <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> which provides z-indexing services for all its descendant floating Components. For example, the dropdown <a href="#!/api/Ext.view.BoundList" rel="Ext.view.BoundList" class="docClass">BoundList</a> of a ComboBox which is in a Window will have the Window as its <code>floatParent</code> See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">zIndexManager</a> Indicates the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the <a href="#!/api/Ext.AbstractComponent-cfg-frame" rel="Ext.AbstractComponent-cfg-frame" class="docClass">frame</a> config. This is an object containing the frame width in pixels for all four sides of the Component containing the following properties: This is an internal flag that you use when creating custom components. By default this is set to true which means that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false since they want to implement custom disable logic. This Component's owner <a href="#!/api/Ext.container.Container" rel="Ext.container.Container" class="docClass">Container</a> (is set automatically when this Component is added to a Container). Note: to access items within the Container see <a href="#!/api/Ext.AbstractComponent-cfg-itemId" rel="Ext.AbstractComponent-cfg-itemId" class="docClass">itemId</a>. Indicates whether or not the component has been rendered. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components after they have been rendered. A reference to the ZIndexManager which is managing this Component's z-index. The <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> maintains a stack of floating Component z-indices, and also provides a single modal mask which is insert just beneath the topmost visible modal floating Component. Floating Components may be <a href="#!/api/Ext.Component-method-toFront" rel="Ext.Component-method-toFront" class="docClass">brought to the front</a> or <a href="#!/api/Ext.Component-method-toBack" rel="Ext.Component-method-toBack" class="docClass">sent to the back</a> of the z-index stack. This defaults to the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> for floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a>. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found which is floating, or if not found the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> is used. See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-floatParent" rel="Ext.Component-property-floatParent" class="docClass">floatParent</a> Adds each argument passed to this method to the childEls array. Adds a CSS class to the top level element representing this component. Adds a CSS class to the top level element representing this component. Adds a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-addUIClsToElement" rel="Ext.AbstractComponent-method-addUIClsToElement" class="docClass">addUIClsToElement</a> and adds to all elements of this component. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Save a property to the given state object if it is not its default or configured value. Add events that will trigger the state to be saved. If the first argument is an array, each element of that array is the name of a state event. Otherwise, each argument passed to this method is the name of a state event. Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element. Called by the layout system when the Component has been layed out. Aligns this floating Component to the specified element Perform custom animation on this object. This method is applicable to both the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a> class and the <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a> class. It performs animated transitions of certain properties of this object over a specified timeline. The sole parameter is an object which specifies start property values, end property values, and properties which describe the timeline. <h3>Animating an <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a></h3> When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The page X position in pixels.</li> <li><code>y</code> - The page Y position in pixels</li> <li><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</li> <li><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</li> <li><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</li> <li><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</li> <li><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</li> <li><code>scrollTop</code> - The element's <code>scrollLeft</code> value.</li> <li><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</li> </ul> Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components. <h3>Animating a <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a></h3> When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The Component's page X position in pixels.</li> <li><code>y</code> - The Component's page Y position in pixels</li> <li><code>left</code> - The Component's <code>left</code> value in pixels.</li> <li><code>top</code> - The Component's <code>top</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.</li> </ul> For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct: <pre><code>myWindow = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>', { title: 'Test Component animation', width: 500, height: 300, layout: { type: 'hbox', align: 'stretch' }, items: [{ title: 'Left: 33%', margins: '5 0 5 5', flex: 1 }, { title: 'Left: 66%', margins: '5 5 5 5', flex: 2 }] }); myWindow.show(); myWindow.header.el.on('click', function() { myWindow.animate({ to: { width: (myWindow.getWidth() == 500) ? 700 : 500, height: (myWindow.getHeight() == 300) ? 400 : 300, } }); }); </code></pre> For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation. Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object. Utility wrapper that suspends layouts of all components for the duration of a given function. Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed. Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Center this Component in its container. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Clone the current component using the original config values passed into this instance by default. Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their appropriate instances. Destroys the Component. Disable the component. Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body This method needs to be called whenever you change something on this component that requires the Component's layout to be recalculated. Moves this floating Component into a constrain region. By default, this Component is constrained to be within the container it was added to, or the element it was rendered to. An alternative constraint may be passed. Enable the component Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Ensures that this component is attached to <code>document.body</code>. If the component was rendered to Ext.getDetachedBody, then it will be appended to <code>document.body</code>. Any configured position is also restored. Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. Find a container above this component at any level by xtype or class See also the <a href="#!/api/Ext.Component-method-up" rel="Ext.Component-method-up" class="docClass">up</a> method. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Try to focus this component. Forces this component to redo its componentLayout. Returns the current animation if this object has any effects actively running or queued, else returns false. Gets the current box measurements of the component's underlying element. Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. Retrieves the top level element representing this component. Gets the current height of the component's underlying element. Retrieves the id of this component. Will autogenerate an id if one has not already been set. This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore. Gets the <a href="#!/api/Ext.ComponentLoader" rel="Ext.ComponentLoader" class="docClass">Ext.ComponentLoader</a> for this Component. Retrieves a plugin by its pluginId which has been bound to this component. Gets the current XY position of the component's underlying element. Gets the current size of the component's underlying element. Returns an object that describes how this component's width and height is managed. These objects are shared and should not be modified. The supplied default state gathering method for the AbstractComponent class. This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code> state. Subclasses which implement more complex state should call the superclass's implementation, and apply their state to the result if this basic state is to be saved. Note that Component state will only be saved if the Component has a <a href="#!/api/Ext.AbstractComponent-cfg-stateId" rel="Ext.AbstractComponent-cfg-stateId" class="docClass">stateId</a> and there as a StateProvider configured for the document. Gets the state id for this object. Gets the current width of the component's underlying element. Gets the xtype for this component as registered with <a href="#!/api/Ext.ComponentManager" rel="Ext.ComponentManager" class="docClass">Ext.ComponentManager</a>. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXType()); // alerts 'textfield' </code></pre> Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXTypes()); // alerts 'component/field/textfield' </code></pre> Returns the current animation if this object has any effects actively running or queued, else returns false. Checks if the specified CSS class exists on this element's DOM node. Checks to see if this object has any listeners for a specified event Checks if there is currently a specified uiCls Hides this Component, setting it to invisible using the configured <a href="#!/api/Ext.Component-cfg-hideMode" rel="Ext.Component-cfg-hideMode" class="docClass">hideMode</a>. The initComponent template method is an important initialization step for a Component. It is intended to be implemented by each subclass of <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to <a href="#!/api/Ext.Base-method-callParent" rel="Ext.Base-method-callParent" class="docClass">callParent</a> in order to ensure that the parent class' initComponent method is also called. All config options passed to the constructor are applied to <code>this</code> before initComponent is called, so you can simply access them with <code>this.someOption</code>. The following example demonstrates using a dynamic string for the text of a button at the time of instantiation of the class. <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('DynamicButtonText', { extend: '<a href="#!/api/Ext.button.Button" rel="Ext.button.Button" class="docClass">Ext.button.Button</a>', initComponent: function() { this.text = new Date(); this.renderTo = <a href="#!/api/Ext-method-getBody" rel="Ext-method-getBody" class="docClass">Ext.getBody</a>(); this.callParent(); } }); <a href="#!/api/Ext-method-onReady" rel="Ext-method-onReady" class="docClass">Ext.onReady</a>(function() { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('DynamicButtonText'); }); </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Tests whether this Component matches the selector string. Determines whether this component is the descendant of a particular container. Method to determine whether this Component is currently disabled. Method to determine whether this Component is draggable. Method to determine whether this Component is droppable. Method to determine whether this Component is floating. Method to determine whether this Component is currently set to hidden. Determines whether this Component is the root of a layout. This returns <code>true</code> if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, <code>false</code> is returned and its owner will be considered as the next candidate for the layout root. Setting the <a href="#!/api/Ext.AbstractComponent-property-_isLayoutRoot" rel="Ext.AbstractComponent-property-_isLayoutRoot" class="docClass">_isLayoutRoot</a> property to <code>true</code> causes this method to always return <code>true</code>. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run. Returns true if layout is suspended for this component. This can come from direct suspension of this component's layout activity (suspendLayouts) or if one of this component's containers is suspended. Returns true if this component is visible. Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); var isText = t.isXType('textfield'); // true var isBoxSubclass = t.isXType('field'); // true, descended from <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> var isBoxInstance = t.isXType('field', true); // false, not a direct <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> instance </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Returns the next node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextSibling" rel="Ext.AbstractComponent-method-nextSibling" class="docClass">nextSibling</a>. Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>next()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextNode" rel="Ext.AbstractComponent-method-nextNode" class="docClass">nextNode</a> Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Template method called when this Component's DOM structure is created. At this point, this Component's (And all descendants') DOM structure exists but it has not been layed out (positioned and sized). Subclasses which override this to gain access to the structure at render time should call the parent class's method before attempting to access any child elements of the Component. Returns the previous node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousSibling" rel="Ext.AbstractComponent-method-previousSibling" class="docClass">previousSibling</a>. Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>prev()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousNode" rel="Ext.AbstractComponent-method-previousNode" class="docClass">previousNode</a> Called by Component#doAutoRender Register a Container configured <code>floating: true</code> with this Component's <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a>. Components added in ths way will not participate in any layout, but will be rendered upon first show in the way that <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Window</a>s are. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. 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. Removes a CSS class from the top level element representing this component. Removes a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-removeUIClsFromElement" rel="Ext.AbstractComponent-method-removeUIClsFromElement" class="docClass">removeUIClsFromElement</a> and removes it from all elements of this component. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Method which removes a specified UI + uiCls from the components element. The cls which is added to the element will be: <code>this.baseCls + '-' + ui</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Conditionally saves a single property from this object to the given state object. The idea is to only save state which has changed from the initial state so that current software settings do not override future software settings. Only those values that are user-changed state should be saved. Scrolls this Component's target element by the passed delta values, optionally animating. All of the following are equivalent: <pre><code> comp.scrollBy(10, 10, true); comp.scrollBy([10, 10], true); comp.scrollBy({ x: 10, y: 10 }, true); </code></pre> Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of <a href="#!/api/Ext.util.Animate-method-syncFx" rel="Ext.util.Animate-method-syncFx" class="docClass">syncFx</a>. This method is called internally by <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">Ext.ZIndexManager</a> to signal that a floating Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack. If a Window is superceded by another Window, deactivating it hides its shadow. This method also fires the <a href="#!/api/Ext.Component-event-activate" rel="Ext.Component-event-activate" class="docClass">activate</a> or <a href="#!/api/Ext.Component-event-deactivate" rel="Ext.Component-event-deactivate" class="docClass">deactivate</a> event depending on which action occurred. Sets the overflow on the content element of the component. Enable or disable the component. Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default) Sets the height of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method allows you to show or hide a LoadMask on top of this component. Sets the overflow x/y on the content element of the component. The x/y overflow values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the value is 'hidden'. Passing null for one of the values will erase the inline style. Passing <code>undefined</code> will preserve the current value. Sets the page XY position of the component. To set the left and top instead, use <a href="#!/api/Ext.Component-method-setPosition" rel="Ext.Component-method-setPosition" class="docClass">setPosition</a>. This method fires the <a href="#!/api/Ext.Component-event-move" rel="Ext.Component-event-move" class="docClass">move</a> event. Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the <a href="#!/api/Ext.AbstractComponent-event-move" rel="Ext.AbstractComponent-event-move" class="docClass">move</a> event. Sets the width and height of this Component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method can accept either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>. Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCls set on the component and rename them so they include the new UI Convenience function to hide or show this component by boolean. Sets the width of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. Shows this Component, rendering it first if <a href="#!/api/Ext.Component-cfg-autoRender" rel="Ext.Component-cfg-autoRender" class="docClass">autoRender</a> or <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> are <code>true</code>. After being shown, a <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Component (such as a <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>), is activated it and brought to the front of its <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">z-index stack</a>. Displays component at specific xy position. A floating component (like a menu) is positioned relative to its ownerCt if any. Useful for popping up a context menu: <pre><code>listeners: { itemcontextmenu: function(view, record, item, index, event, options) { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.menu.Menu" rel="Ext.menu.Menu" class="docClass">Ext.menu.Menu</a>', { width: 100, height: 100, margin: '0 0 10 0', items: [{ text: 'regular item 1' },{ text: 'regular item 2' },{ text: 'regular item 3' }] }).showAt(event.getXY()); } } </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of <a href="#!/api/Ext.util.Animate-method-sequenceFx" rel="Ext.util.Animate-method-sequenceFx" class="docClass">sequenceFx</a>. Sends this Component to the back of (lower z-index than) any other visible windows Brings this floating Component to the front of any other visible, floating Components managed by the same <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> If this Component is modal, inserts the modal mask just below this Component in the z-index stack. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Walks up the <code>ownerCt</code> axis looking for an ancestor Container which matches the passed simple selector. Example: <pre><code>var owningTabPanel = grid.up('tabpanel'); </code></pre> Update the content area of a component. Sets the current box measurements of the component's underlying element. Updates this component's layout. If this update effects this components <a href="#!/api/Ext.AbstractComponent-property-ownerCt" rel="Ext.AbstractComponent-property-ownerCt" class="docClass">ownerCt</a>, that component's <code>updateLayout</code> method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Aborts the active load request Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Destroys the loader. Any active requests will be aborted. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns the target of this loader. Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Checks whether the loader is automatically refreshing. See <a href="#!/api/Ext.ElementLoader-method-startAutoRefresh" rel="Ext.ElementLoader-method-startAutoRefresh" class="docClass">startAutoRefresh</a>. Loads new data from the server. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Get the target of this loader. Set a {<a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a>} as the target of this loader. Note that if the target is changed, any active requests will be aborted. Automatically refreshes the content over a specified period. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Clears any auto refresh. See <a href="#!/api/Ext.ElementLoader-method-startAutoRefresh" rel="Ext.ElementLoader-method-startAutoRefresh" class="docClass">startAutoRefresh</a>. Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Contains all of the items currently managed Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Creates a new Component from the specified config object using the config object's xtype to determine the class to instantiate. Executes the specified function once for each item in the collection. Returns an item by id. For additional details see <a href="#!/api/Ext.util.HashMap-method-get" rel="Ext.util.HashMap-method-get" class="docClass">Ext.util.HashMap.get</a>. Gets the number of items in the collection. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Checks if an item type is registered. Registers a function that will be called when an item with the specified id is added to the manager. This will happen on instantiation. Registers an item to be managed Registers a new item constructor, keyed by a type key. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Unregisters an item by removing it from this manager Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Tests whether the passed Component matches the selector string. Returns an array of matched Components from within the passed root object. This method filters returned Components in a similar way to how CSS selector based DOM queries work using a textual selector string. See class summary for details. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates new Component. The configuration options may be specified as either: <ul> <li>an element : it is set as the internal element and its id used as the component id</li> <li>a string : it is assumed to be the id of an existing element and is used as the component id</li> <li>anything else : it is assumed to be a standard config object and is applied to the component</li> </ul>

Setting this property to <code>true</code> causes the <a href="#!/api/Ext.AbstractComponent-method-isLayoutRoot" rel="Ext.AbstractComponent-method-isLayoutRoot" class="docClass">isLayoutRoot</a> method to return <code>true</code> and stop the search for the top-most component for a layout. Indicates whether or not the component can be dragged. Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which were inserted as descendant items of floating Containers. Floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a> will not have a <code>floatParent</code> property. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are child items of a Container, the floatParent will be the floating ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides a <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> which provides z-indexing services for all its descendant floating Components. For example, the dropdown <a href="#!/api/Ext.view.BoundList" rel="Ext.view.BoundList" class="docClass">BoundList</a> of a ComboBox which is in a Window will have the Window as its <code>floatParent</code> See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">zIndexManager</a> Indicates the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the <a href="#!/api/Ext.AbstractComponent-cfg-frame" rel="Ext.AbstractComponent-cfg-frame" class="docClass">frame</a> config. This is an object containing the frame width in pixels for all four sides of the Component containing the following properties: The MixedCollection containing all the child items of this container. This is an internal flag that you use when creating custom components. By default this is set to true which means that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false since they want to implement custom disable logic. This Component's owner <a href="#!/api/Ext.container.Container" rel="Ext.container.Container" class="docClass">Container</a> (is set automatically when this Component is added to a Container). Note: to access items within the Container see <a href="#!/api/Ext.AbstractComponent-cfg-itemId" rel="Ext.AbstractComponent-cfg-itemId" class="docClass">itemId</a>. Indicates whether or not the component has been rendered. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components after they have been rendered. A reference to the ZIndexManager which is managing this Component's z-index. The <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> maintains a stack of floating Component z-indices, and also provides a single modal mask which is insert just beneath the topmost visible modal floating Component. Floating Components may be <a href="#!/api/Ext.Component-method-toFront" rel="Ext.Component-method-toFront" class="docClass">brought to the front</a> or <a href="#!/api/Ext.Component-method-toBack" rel="Ext.Component-method-toBack" class="docClass">sent to the back</a> of the z-index stack. This defaults to the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> for floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a>. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found which is floating, or if not found the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> is used. See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-floatParent" rel="Ext.Component-property-floatParent" class="docClass">floatParent</a> Adds <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a>(s) to this Container. <h2>Description:</h2> <ul> <li>Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before adding.</li> <li>The Container's <a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">default config values</a> will be applied accordingly (see <code><a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">defaults</a></code> for details).</li> <li>Fires the <code><a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a></code> event after the component has been added.</li> </ul> <h2>Notes:</h2> If the Container is already rendered when <code>add</code> is called, it will render the newly added Component into its content area. If the Container was configured with a size-managing <a href="#!/api/Ext.container.AbstractContainer-cfg-layout" rel="Ext.container.AbstractContainer-cfg-layout" class="docClass">layout</a> manager, the Container will recalculate its internal layout at this time too. Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing. If adding multiple new child Components, pass them as an array to the <code>add</code> method, so that only one layout recalculation is performed. <pre><code>tb = new <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Ext.toolbar.Toolbar</a>({ renderTo: document.body }); // toolbar is rendered // add multiple items. // (<a href="#!/api/Ext.container.AbstractContainer-cfg-defaultType" rel="Ext.container.AbstractContainer-cfg-defaultType" class="docClass">defaultType</a> for <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Toolbar</a> is 'button') tb.add([{text:'Button 1'}, {text:'Button 2'}]); </code></pre> To inject components between existing ones, use the <a href="#!/api/Ext.container.AbstractContainer-method-insert" rel="Ext.container.AbstractContainer-method-insert" class="docClass">insert</a> method. <h2>Warning:</h2> Components directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for <a href="#!/api/Ext.layout.container.Border" rel="Ext.layout.container.Border" class="docClass">BorderLayout</a> for more details. Adds each argument passed to this method to the childEls array. Adds a CSS class to the top level element representing this component. Adds a CSS class to the top level element representing this component. Adds a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-addUIClsToElement" rel="Ext.AbstractComponent-method-addUIClsToElement" class="docClass">addUIClsToElement</a> and adds to all elements of this component. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Save a property to the given state object if it is not its default or configured value. Add events that will trigger the state to be saved. If the first argument is an array, each element of that array is the name of a state event. Otherwise, each argument passed to this method is the name of a state event. Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element. Called by the layout system when the Component has been layed out. Aligns this floating Component to the specified element Perform custom animation on this object. This method is applicable to both the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a> class and the <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a> class. It performs animated transitions of certain properties of this object over a specified timeline. The sole parameter is an object which specifies start property values, end property values, and properties which describe the timeline. <h3>Animating an <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a></h3> When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The page X position in pixels.</li> <li><code>y</code> - The page Y position in pixels</li> <li><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</li> <li><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</li> <li><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</li> <li><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</li> <li><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</li> <li><code>scrollTop</code> - The element's <code>scrollLeft</code> value.</li> <li><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</li> </ul> Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components. <h3>Animating a <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a></h3> When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The Component's page X position in pixels.</li> <li><code>y</code> - The Component's page Y position in pixels</li> <li><code>left</code> - The Component's <code>left</code> value in pixels.</li> <li><code>top</code> - The Component's <code>top</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.</li> </ul> For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct: <pre><code>myWindow = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>', { title: 'Test Component animation', width: 500, height: 300, layout: { type: 'hbox', align: 'stretch' }, items: [{ title: 'Left: 33%', margins: '5 0 5 5', flex: 1 }, { title: 'Left: 66%', margins: '5 5 5 5', flex: 2 }] }); myWindow.show(); myWindow.header.el.on('click', function() { myWindow.animate({ to: { width: (myWindow.getWidth() == 500) ? 700 : 500, height: (myWindow.getHeight() == 300) ? 400 : 300, } }); }); </code></pre> For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation. Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object. Utility wrapper that suspends layouts of all components for the duration of a given function. Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed. Occurs before componentLayout is run. Returning false from this method will prevent the containerLayout from being executed. Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Cascades down the component/container heirarchy from this component (passed in the first call), calling the specified function with each component. The scope (this reference) of the function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the cascade is stopped on that branch. Center this Component in its container. Retrieves the first direct child of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Clone the current component using the original config values passed into this instance by default. Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their appropriate instances. Destroys the Component. Disable the component. Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body This method needs to be called whenever you change something on this component that requires the Component's layout to be recalculated. Moves this floating Component into a constrain region. By default, this Component is constrained to be within the container it was added to, or the element it was rendered to. An alternative constraint may be passed. Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts form most cases. Retrieves the first descendant of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Enable the component Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Ensures that this component is attached to <code>document.body</code>. If the component was rendered to Ext.getDetachedBody, then it will be appended to <code>document.body</code>. Any configured position is also restored. Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. Find a container above this component at any level by xtype or class See also the <a href="#!/api/Ext.Component-method-up" rel="Ext.Component-method-up" class="docClass">up</a> method. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Try to focus this component. Forces this component to redo its componentLayout. Returns the current animation if this object has any effects actively running or queued, else returns false. Gets the current box measurements of the component's underlying element. Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. Examines this container's <a href="#!/api/Ext.container.AbstractContainer-property-items" rel="Ext.container.AbstractContainer-property-items" class="docClass">items</a> property and gets a direct child component of this container. Retrieves the top level element representing this component. Gets the current height of the component's underlying element. Retrieves the id of this component. Will autogenerate an id if one has not already been set. This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore. Returns the <a href="#!/api/Ext.layout.container.Container" rel="Ext.layout.container.Container" class="docClass">layout</a> instance currently associated with this Container. If a layout has not been instantiated yet, that is done first Gets the <a href="#!/api/Ext.ComponentLoader" rel="Ext.ComponentLoader" class="docClass">Ext.ComponentLoader</a> for this Component. Retrieves a plugin by its pluginId which has been bound to this component. Gets the current XY position of the component's underlying element. Gets the current size of the component's underlying element. Returns an object that describes how this component's width and height is managed. These objects are shared and should not be modified. The supplied default state gathering method for the AbstractComponent class. This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code> state. Subclasses which implement more complex state should call the superclass's implementation, and apply their state to the result if this basic state is to be saved. Note that Component state will only be saved if the Component has a <a href="#!/api/Ext.AbstractComponent-cfg-stateId" rel="Ext.AbstractComponent-cfg-stateId" class="docClass">stateId</a> and there as a StateProvider configured for the document. Gets the state id for this object. Gets the current width of the component's underlying element. Gets the xtype for this component as registered with <a href="#!/api/Ext.ComponentManager" rel="Ext.ComponentManager" class="docClass">Ext.ComponentManager</a>. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXType()); // alerts 'textfield' </code></pre> Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXTypes()); // alerts 'component/field/textfield' </code></pre> Returns the current animation if this object has any effects actively running or queued, else returns false. Checks if the specified CSS class exists on this element's DOM node. Checks to see if this object has any listeners for a specified event Checks if there is currently a specified uiCls Hides this Component, setting it to invisible using the configured <a href="#!/api/Ext.Component-cfg-hideMode" rel="Ext.Component-cfg-hideMode" class="docClass">hideMode</a>. The initComponent template method is an important initialization step for a Component. It is intended to be implemented by each subclass of <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to <a href="#!/api/Ext.Base-method-callParent" rel="Ext.Base-method-callParent" class="docClass">callParent</a> in order to ensure that the parent class' initComponent method is also called. All config options passed to the constructor are applied to <code>this</code> before initComponent is called, so you can simply access them with <code>this.someOption</code>. The following example demonstrates using a dynamic string for the text of a button at the time of instantiation of the class. <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('DynamicButtonText', { extend: '<a href="#!/api/Ext.button.Button" rel="Ext.button.Button" class="docClass">Ext.button.Button</a>', initComponent: function() { this.text = new Date(); this.renderTo = <a href="#!/api/Ext-method-getBody" rel="Ext-method-getBody" class="docClass">Ext.getBody</a>(); this.callParent(); } }); <a href="#!/api/Ext-method-onReady" rel="Ext-method-onReady" class="docClass">Ext.onReady</a>(function() { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('DynamicButtonText'); }); </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Inserts a Component into this Container at a specified index. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before inserting, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a> event after the Component has been inserted. Tests whether this Component matches the selector string. Determines whether this Container is an ancestor of the passed Component. This will return <code>true</code> if the passed Component is anywhere within the subtree beneath this Container. Determines whether this component is the descendant of a particular container. Method to determine whether this Component is currently disabled. Method to determine whether this Component is draggable. Method to determine whether this Component is droppable. Method to determine whether this Component is floating. Method to determine whether this Component is currently set to hidden. Determines whether this Component is the root of a layout. This returns <code>true</code> if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, <code>false</code> is returned and its owner will be considered as the next candidate for the layout root. Setting the <a href="#!/api/Ext.AbstractComponent-property-_isLayoutRoot" rel="Ext.AbstractComponent-property-_isLayoutRoot" class="docClass">_isLayoutRoot</a> property to <code>true</code> causes this method to always return <code>true</code>. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run. Returns true if layout is suspended for this component. This can come from direct suspension of this component's layout activity (suspendLayouts) or if one of this component's containers is suspended. Returns true if this component is visible. Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); var isText = t.isXType('textfield'); // true var isBoxSubclass = t.isXType('field'); // true, descended from <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> var isBoxInstance = t.isXType('field', true); // false, not a direct <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> instance </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Moves a Component within the Container Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Returns the next node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextSibling" rel="Ext.AbstractComponent-method-nextSibling" class="docClass">nextSibling</a>. Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>next()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextNode" rel="Ext.AbstractComponent-method-nextNode" class="docClass">nextNode</a> Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Template method called when this Component's DOM structure is created. At this point, this Component's (And all descendants') DOM structure exists but it has not been layed out (positioned and sized). Subclasses which override this to gain access to the structure at render time should call the parent class's method before attempting to access any child elements of the Component. Returns the previous node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousSibling" rel="Ext.AbstractComponent-method-previousSibling" class="docClass">previousSibling</a>. Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>prev()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousNode" rel="Ext.AbstractComponent-method-previousNode" class="docClass">previousNode</a> Retrieves all descendant components which match the passed selector. Executes an <a href="#!/api/Ext.ComponentQuery-method-query" rel="Ext.ComponentQuery-method-query" class="docClass">Ext.ComponentQuery.query</a> using this container as its root. Retrieves all descendant components which match the passed function. The function should return false for components that are to be excluded from the selection. Finds a component at any level under this container matching the id/itemId. This is a shorthand for calling ct.down('#' + id); Called by Component#doAutoRender Register a Container configured <code>floating: true</code> with this Component's <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a>. Components added in ths way will not participate in any layout, but will be rendered upon first show in the way that <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Window</a>s are. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes a component from this container. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeremove" rel="Ext.container.AbstractContainer-event-beforeremove" class="docClass">beforeremove</a> event before removing, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-remove" rel="Ext.container.AbstractContainer-event-remove" class="docClass">remove</a> event after the component has been removed. Removes all components from this container. 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. Removes a CSS class from the top level element representing this component. Removes a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-removeUIClsFromElement" rel="Ext.AbstractComponent-method-removeUIClsFromElement" class="docClass">removeUIClsFromElement</a> and removes it from all elements of this component. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Method which removes a specified UI + uiCls from the components element. The cls which is added to the element will be: <code>this.baseCls + '-' + ui</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Conditionally saves a single property from this object to the given state object. The idea is to only save state which has changed from the initial state so that current software settings do not override future software settings. Only those values that are user-changed state should be saved. Scrolls this Component's target element by the passed delta values, optionally animating. All of the following are equivalent: <pre><code> comp.scrollBy(10, 10, true); comp.scrollBy([10, 10], true); comp.scrollBy({ x: 10, y: 10 }, true); </code></pre> Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of <a href="#!/api/Ext.util.Animate-method-syncFx" rel="Ext.util.Animate-method-syncFx" class="docClass">syncFx</a>. This method is called internally by <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">Ext.ZIndexManager</a> to signal that a floating Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack. If a Window is superceded by another Window, deactivating it hides its shadow. This method also fires the <a href="#!/api/Ext.Component-event-activate" rel="Ext.Component-event-activate" class="docClass">activate</a> or <a href="#!/api/Ext.Component-event-deactivate" rel="Ext.Component-event-deactivate" class="docClass">deactivate</a> event depending on which action occurred. Sets the overflow on the content element of the component. Enable or disable the component. Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default) Sets the height of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method allows you to show or hide a LoadMask on top of this component. Sets the overflow x/y on the content element of the component. The x/y overflow values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the value is 'hidden'. Passing null for one of the values will erase the inline style. Passing <code>undefined</code> will preserve the current value. Sets the page XY position of the component. To set the left and top instead, use <a href="#!/api/Ext.Component-method-setPosition" rel="Ext.Component-method-setPosition" class="docClass">setPosition</a>. This method fires the <a href="#!/api/Ext.Component-event-move" rel="Ext.Component-event-move" class="docClass">move</a> event. Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the <a href="#!/api/Ext.AbstractComponent-event-move" rel="Ext.AbstractComponent-event-move" class="docClass">move</a> event. Sets the width and height of this Component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method can accept either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>. Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCls set on the component and rename them so they include the new UI Convenience function to hide or show this component by boolean. Sets the width of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. Shows this Component, rendering it first if <a href="#!/api/Ext.Component-cfg-autoRender" rel="Ext.Component-cfg-autoRender" class="docClass">autoRender</a> or <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> are <code>true</code>. After being shown, a <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Component (such as a <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>), is activated it and brought to the front of its <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">z-index stack</a>. Displays component at specific xy position. A floating component (like a menu) is positioned relative to its ownerCt if any. Useful for popping up a context menu: <pre><code>listeners: { itemcontextmenu: function(view, record, item, index, event, options) { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.menu.Menu" rel="Ext.menu.Menu" class="docClass">Ext.menu.Menu</a>', { width: 100, height: 100, margin: '0 0 10 0', items: [{ text: 'regular item 1' },{ text: 'regular item 2' },{ text: 'regular item 3' }] }).showAt(event.getXY()); } } </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of <a href="#!/api/Ext.util.Animate-method-sequenceFx" rel="Ext.util.Animate-method-sequenceFx" class="docClass">sequenceFx</a>. Sends this Component to the back of (lower z-index than) any other visible windows Brings this floating Component to the front of any other visible, floating Components managed by the same <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> If this Component is modal, inserts the modal mask just below this Component in the z-index stack. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Walks up the <code>ownerCt</code> axis looking for an ancestor Container which matches the passed simple selector. Example: <pre><code>var owningTabPanel = grid.up('tabpanel'); </code></pre> Update the content area of a component. Sets the current box measurements of the component's underlying element. Updates this component's layout. If this update effects this components <a href="#!/api/Ext.AbstractComponent-property-ownerCt" rel="Ext.AbstractComponent-property-ownerCt" class="docClass">ownerCt</a>, that component's <code>updateLayout</code> method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout. Creates new Component. The configuration options may be specified as either: <ul> <li>an element : it is set as the internal element and its id used as the component id</li> <li>a string : it is assumed to be the id of an existing element and is used as the component id</li> <li>anything else : it is assumed to be a standard config object and is applied to the component</li> </ul>

Setting this property to <code>true</code> causes the <a href="#!/api/Ext.AbstractComponent-method-isLayoutRoot" rel="Ext.AbstractComponent-method-isLayoutRoot" class="docClass">isLayoutRoot</a> method to return <code>true</code> and stop the search for the top-most component for a layout. If this Panel is configured <a href="#!/api/Ext.panel.Panel-cfg-draggable" rel="Ext.panel.Panel-cfg-draggable" class="docClass">draggable</a>, this property will contain an instance of <a href="#!/api/Ext.dd.DragSource" rel="Ext.dd.DragSource" class="docClass">Ext.dd.DragSource</a> which handles dragging the Panel. The developer must provide implementations of the abstract methods of <a href="#!/api/Ext.dd.DragSource" rel="Ext.dd.DragSource" class="docClass">Ext.dd.DragSource</a> in order to supply behaviour for each stage of the drag/drop process. See <a href="#!/api/Ext.panel.Panel-cfg-draggable" rel="Ext.panel.Panel-cfg-draggable" class="docClass">draggable</a>. Indicates whether or not the component can be dragged. Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which were inserted as descendant items of floating Containers. Floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a> will not have a <code>floatParent</code> property. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are child items of a Container, the floatParent will be the floating ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides a <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> which provides z-indexing services for all its descendant floating Components. For example, the dropdown <a href="#!/api/Ext.view.BoundList" rel="Ext.view.BoundList" class="docClass">BoundList</a> of a ComboBox which is in a Window will have the Window as its <code>floatParent</code> See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">zIndexManager</a> Indicates the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the <a href="#!/api/Ext.AbstractComponent-cfg-frame" rel="Ext.AbstractComponent-cfg-frame" class="docClass">frame</a> config. This is an object containing the frame width in pixels for all four sides of the Component containing the following properties: The MixedCollection containing all the child items of this container. This is an internal flag that you use when creating custom components. By default this is set to true which means that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false since they want to implement custom disable logic. This Component's owner <a href="#!/api/Ext.container.Container" rel="Ext.container.Container" class="docClass">Container</a> (is set automatically when this Component is added to a Container). Note: to access items within the Container see <a href="#!/api/Ext.AbstractComponent-cfg-itemId" rel="Ext.AbstractComponent-cfg-itemId" class="docClass">itemId</a>. Indicates whether or not the component has been rendered. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components after they have been rendered. A reference to the ZIndexManager which is managing this Component's z-index. The <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> maintains a stack of floating Component z-indices, and also provides a single modal mask which is insert just beneath the topmost visible modal floating Component. Floating Components may be <a href="#!/api/Ext.Component-method-toFront" rel="Ext.Component-method-toFront" class="docClass">brought to the front</a> or <a href="#!/api/Ext.Component-method-toBack" rel="Ext.Component-method-toBack" class="docClass">sent to the back</a> of the z-index stack. This defaults to the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> for floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a>. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found which is floating, or if not found the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> is used. See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-floatParent" rel="Ext.Component-property-floatParent" class="docClass">floatParent</a> Adds <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a>(s) to this Container. <h2>Description:</h2> <ul> <li>Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before adding.</li> <li>The Container's <a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">default config values</a> will be applied accordingly (see <code><a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">defaults</a></code> for details).</li> <li>Fires the <code><a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a></code> event after the component has been added.</li> </ul> <h2>Notes:</h2> If the Container is already rendered when <code>add</code> is called, it will render the newly added Component into its content area. If the Container was configured with a size-managing <a href="#!/api/Ext.container.AbstractContainer-cfg-layout" rel="Ext.container.AbstractContainer-cfg-layout" class="docClass">layout</a> manager, the Container will recalculate its internal layout at this time too. Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing. If adding multiple new child Components, pass them as an array to the <code>add</code> method, so that only one layout recalculation is performed. <pre><code>tb = new <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Ext.toolbar.Toolbar</a>({ renderTo: document.body }); // toolbar is rendered // add multiple items. // (<a href="#!/api/Ext.container.AbstractContainer-cfg-defaultType" rel="Ext.container.AbstractContainer-cfg-defaultType" class="docClass">defaultType</a> for <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Toolbar</a> is 'button') tb.add([{text:'Button 1'}, {text:'Button 2'}]); </code></pre> To inject components between existing ones, use the <a href="#!/api/Ext.container.AbstractContainer-method-insert" rel="Ext.container.AbstractContainer-method-insert" class="docClass">insert</a> method. <h2>Warning:</h2> Components directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for <a href="#!/api/Ext.layout.container.Border" rel="Ext.layout.container.Border" class="docClass">BorderLayout</a> for more details. Adds each argument passed to this method to the childEls array. Adds a CSS class to the top level element representing this component. Adds a CSS class to the top level element representing this component. Adds a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-addUIClsToElement" rel="Ext.AbstractComponent-method-addUIClsToElement" class="docClass">addUIClsToElement</a> and adds to all elements of this component. Adds docked item(s) to the container. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Save a property to the given state object if it is not its default or configured value. Add events that will trigger the state to be saved. If the first argument is an array, each element of that array is the name of a state event. Otherwise, each argument passed to this method is the name of a state event. Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element. Called by the layout system when the Component has been layed out. Aligns this floating Component to the specified element Perform custom animation on this object. This method is applicable to both the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a> class and the <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a> class. It performs animated transitions of certain properties of this object over a specified timeline. The sole parameter is an object which specifies start property values, end property values, and properties which describe the timeline. <h3>Animating an <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a></h3> When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The page X position in pixels.</li> <li><code>y</code> - The page Y position in pixels</li> <li><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</li> <li><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</li> <li><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</li> <li><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</li> <li><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</li> <li><code>scrollTop</code> - The element's <code>scrollLeft</code> value.</li> <li><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</li> </ul> Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components. <h3>Animating a <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a></h3> When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The Component's page X position in pixels.</li> <li><code>y</code> - The Component's page Y position in pixels</li> <li><code>left</code> - The Component's <code>left</code> value in pixels.</li> <li><code>top</code> - The Component's <code>top</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.</li> </ul> For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct: <pre><code>myWindow = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>', { title: 'Test Component animation', width: 500, height: 300, layout: { type: 'hbox', align: 'stretch' }, items: [{ title: 'Left: 33%', margins: '5 0 5 5', flex: 1 }, { title: 'Left: 66%', margins: '5 5 5 5', flex: 2 }] }); myWindow.show(); myWindow.header.el.on('click', function() { myWindow.animate({ to: { width: (myWindow.getWidth() == 500) ? 700 : 500, height: (myWindow.getHeight() == 300) ? 400 : 300, } }); }); </code></pre> For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation. Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object. Utility wrapper that suspends layouts of all components for the duration of a given function. Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed. Occurs before componentLayout is run. Returning false from this method will prevent the containerLayout from being executed. Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Cascades down the component/container heirarchy from this component (passed in the first call), calling the specified function with each component. The scope (this reference) of the function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the cascade is stopped on that branch. Center this Component in its container. Retrieves the first direct child of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Clone the current component using the original config values passed into this instance by default. Closes the Panel. By default, this method, removes it from the DOM, <a href="#!/api/Ext.Component-method-destroy" rel="Ext.Component-method-destroy" class="docClass">destroy</a>s the Panel object and all its descendant Components. The <a href="#!/api/Ext.panel.Panel-event-beforeclose" rel="Ext.panel.Panel-event-beforeclose" class="docClass">beforeclose</a> event is fired before the close happens and will cancel the close action if it returns false. Note: This method is also affected by the <a href="#!/api/Ext.panel.Panel-cfg-closeAction" rel="Ext.panel.Panel-cfg-closeAction" class="docClass">closeAction</a> setting. For more explicit control use <a href="#!/api/Ext.panel.Panel-method-destroy" rel="Ext.panel.Panel-method-destroy" class="docClass">destroy</a> and <a href="#!/api/Ext.panel.Panel-method-hide" rel="Ext.panel.Panel-method-hide" class="docClass">hide</a> methods. Collapses the panel body so that the body becomes hidden. Docked Components parallel to the border towards which the collapse takes place will remain visible. Fires the <a href="#!/api/Ext.panel.Panel-event-beforecollapse" rel="Ext.panel.Panel-event-beforecollapse" class="docClass">beforecollapse</a> event which will cancel the collapse action if it returns false. Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their appropriate instances. Destroys the Component. Disable the component. Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body This method needs to be called whenever you change something on this component that requires the Component's layout to be recalculated. Moves this floating Component into a constrain region. By default, this Component is constrained to be within the container it was added to, or the element it was rendered to. An alternative constraint may be passed. Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts form most cases. Retrieves the first descendant of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Enable the component Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Ensures that this component is attached to <code>document.body</code>. If the component was rendered to Ext.getDetachedBody, then it will be appended to <code>document.body</code>. Any configured position is also restored. Expands the panel body so that it becomes visible. Fires the <a href="#!/api/Ext.panel.Panel-event-beforeexpand" rel="Ext.panel.Panel-event-beforeexpand" class="docClass">beforeexpand</a> event which will cancel the expand action if it returns false. Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. Find a container above this component at any level by xtype or class See also the <a href="#!/api/Ext.Component-method-up" rel="Ext.Component-method-up" class="docClass">up</a> method. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Try to focus this component. Forces this component to redo its componentLayout. Returns the current animation if this object has any effects actively running or queued, else returns false. Gets the current box measurements of the component's underlying element. Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. Return the immediate child Component in which the passed element is located. Attempts a default component lookup (see <a href="#!/api/Ext.container.Container-method-getComponent" rel="Ext.container.Container-method-getComponent" class="docClass">Ext.container.Container.getComponent</a>). If the component is not found in the normal items, the dockedItems are searched and the matched component (if any) returned (see <a href="#!/api/Ext.panel.AbstractPanel-method-getDockedComponent" rel="Ext.panel.AbstractPanel-method-getDockedComponent" class="docClass">getDockedComponent</a>). Note that docked items will only be matched by component id or itemId -- if you pass a numeric index only non-docked child components will be searched. Finds a docked component by id, itemId or position. Also see <a href="#!/api/Ext.container.DockingContainer-method-getDockedItems" rel="Ext.container.DockingContainer-method-getDockedItems" class="docClass">getDockedItems</a> Retrieves an array of all currently docked Components. For example to find a toolbar that has been docked at top: <pre><code>panel.getDockedItems('toolbar[dock="top"]'); </code></pre> Retrieves the top level element representing this component. Gets the current height of the component's underlying element. Retrieves the id of this component. Will autogenerate an id if one has not already been set. This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore. Returns the <a href="#!/api/Ext.layout.container.Container" rel="Ext.layout.container.Container" class="docClass">layout</a> instance currently associated with this Container. If a layout has not been instantiated yet, that is done first Gets the <a href="#!/api/Ext.ComponentLoader" rel="Ext.ComponentLoader" class="docClass">Ext.ComponentLoader</a> for this Component. Retrieves a plugin by its pluginId which has been bound to this component. Gets the current XY position of the component's underlying element. Gets the current size of the component's underlying element. Returns an object that describes how this component's width and height is managed. These objects are shared and should not be modified. The supplied default state gathering method for the AbstractComponent class. This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code> state. Subclasses which implement more complex state should call the superclass's implementation, and apply their state to the result if this basic state is to be saved. Note that Component state will only be saved if the Component has a <a href="#!/api/Ext.AbstractComponent-cfg-stateId" rel="Ext.AbstractComponent-cfg-stateId" class="docClass">stateId</a> and there as a StateProvider configured for the document. Gets the state id for this object. Gets the current width of the component's underlying element. Gets the xtype for this component as registered with <a href="#!/api/Ext.ComponentManager" rel="Ext.ComponentManager" class="docClass">Ext.ComponentManager</a>. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXType()); // alerts 'textfield' </code></pre> Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXTypes()); // alerts 'component/field/textfield' </code></pre> Returns the current animation if this object has any effects actively running or queued, else returns false. Checks if the specified CSS class exists on this element's DOM node. Checks to see if this object has any listeners for a specified event Checks if there is currently a specified uiCls Hides this Component, setting it to invisible using the configured <a href="#!/api/Ext.Component-cfg-hideMode" rel="Ext.Component-cfg-hideMode" class="docClass">hideMode</a>. The initComponent template method is an important initialization step for a Component. It is intended to be implemented by each subclass of <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to <a href="#!/api/Ext.Base-method-callParent" rel="Ext.Base-method-callParent" class="docClass">callParent</a> in order to ensure that the parent class' initComponent method is also called. All config options passed to the constructor are applied to <code>this</code> before initComponent is called, so you can simply access them with <code>this.someOption</code>. The following example demonstrates using a dynamic string for the text of a button at the time of instantiation of the class. <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('DynamicButtonText', { extend: '<a href="#!/api/Ext.button.Button" rel="Ext.button.Button" class="docClass">Ext.button.Button</a>', initComponent: function() { this.text = new Date(); this.renderTo = <a href="#!/api/Ext-method-getBody" rel="Ext-method-getBody" class="docClass">Ext.getBody</a>(); this.callParent(); } }); <a href="#!/api/Ext-method-onReady" rel="Ext-method-onReady" class="docClass">Ext.onReady</a>(function() { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('DynamicButtonText'); }); </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Inserts a Component into this Container at a specified index. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before inserting, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a> event after the Component has been inserted. Inserts docked item(s) to the panel at the indicated position. Tests whether this Component matches the selector string. Determines whether this Container is an ancestor of the passed Component. This will return <code>true</code> if the passed Component is anywhere within the subtree beneath this Container. Determines whether this component is the descendant of a particular container. Method to determine whether this Component is currently disabled. Method to determine whether this Component is draggable. Method to determine whether this Component is droppable. Method to determine whether this Component is floating. Method to determine whether this Component is currently set to hidden. Determines whether this Component is the root of a layout. This returns <code>true</code> if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, <code>false</code> is returned and its owner will be considered as the next candidate for the layout root. Setting the <a href="#!/api/Ext.AbstractComponent-property-_isLayoutRoot" rel="Ext.AbstractComponent-property-_isLayoutRoot" class="docClass">_isLayoutRoot</a> property to <code>true</code> causes this method to always return <code>true</code>. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run. Returns true if layout is suspended for this component. This can come from direct suspension of this component's layout activity (suspendLayouts) or if one of this component's containers is suspended. Returns true if this component is visible. Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); var isText = t.isXType('textfield'); // true var isBoxSubclass = t.isXType('field'); // true, descended from <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> var isBoxInstance = t.isXType('field', true); // false, not a direct <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> instance </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Moves a Component within the Container Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Returns the next node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextSibling" rel="Ext.AbstractComponent-method-nextSibling" class="docClass">nextSibling</a>. Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>next()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextNode" rel="Ext.AbstractComponent-method-nextNode" class="docClass">nextNode</a> Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Template method called when this Component's DOM structure is created. At this point, this Component's (And all descendants') DOM structure exists but it has not been layed out (positioned and sized). Subclasses which override this to gain access to the structure at render time should call the parent class's method before attempting to access any child elements of the Component. Returns the previous node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousSibling" rel="Ext.AbstractComponent-method-previousSibling" class="docClass">previousSibling</a>. Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>prev()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousNode" rel="Ext.AbstractComponent-method-previousNode" class="docClass">previousNode</a> Retrieves all descendant components which match the passed selector. Executes an <a href="#!/api/Ext.ComponentQuery-method-query" rel="Ext.ComponentQuery-method-query" class="docClass">Ext.ComponentQuery.query</a> using this container as its root. Retrieves all descendant components which match the passed function. The function should return false for components that are to be excluded from the selection. Finds a component at any level under this container matching the id/itemId. This is a shorthand for calling ct.down('#' + id); Called by Component#doAutoRender Register a Container configured <code>floating: true</code> with this Component's <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a>. Components added in ths way will not participate in any layout, but will be rendered upon first show in the way that <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Window</a>s are. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes a component from this container. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeremove" rel="Ext.container.AbstractContainer-event-beforeremove" class="docClass">beforeremove</a> event before removing, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-remove" rel="Ext.container.AbstractContainer-event-remove" class="docClass">remove</a> event after the component has been removed. Removes all components from this container. 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. Removes a CSS class from the top level element representing this component. Removes a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-removeUIClsFromElement" rel="Ext.AbstractComponent-method-removeUIClsFromElement" class="docClass">removeUIClsFromElement</a> and removes it from all elements of this component. Removes the docked item from the panel. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Method which removes a specified UI + uiCls from the components element. The cls which is added to the element will be: <code>this.baseCls + '-' + ui</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Conditionally saves a single property from this object to the given state object. The idea is to only save state which has changed from the initial state so that current software settings do not override future software settings. Only those values that are user-changed state should be saved. Scrolls this Component's target element by the passed delta values, optionally animating. All of the following are equivalent: <pre><code> comp.scrollBy(10, 10, true); comp.scrollBy([10, 10], true); comp.scrollBy({ x: 10, y: 10 }, true); </code></pre> Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of <a href="#!/api/Ext.util.Animate-method-syncFx" rel="Ext.util.Animate-method-syncFx" class="docClass">syncFx</a>. This method is called internally by <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">Ext.ZIndexManager</a> to signal that a floating Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack. If a Window is superceded by another Window, deactivating it hides its shadow. This method also fires the <a href="#!/api/Ext.Component-event-activate" rel="Ext.Component-event-activate" class="docClass">activate</a> or <a href="#!/api/Ext.Component-event-deactivate" rel="Ext.Component-event-deactivate" class="docClass">deactivate</a> event depending on which action occurred. Sets the overflow on the content element of the component. Sets the body style according to the passed parameters. Enable or disable the component. Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default) Sets the height of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. Set the icon for the panel's header. See <a href="#!/api/Ext.panel.Header-cfg-icon" rel="Ext.panel.Header-cfg-icon" class="docClass">Ext.panel.Header.icon</a>. It will fire the <a href="#!/api/Ext.panel.Panel-event-iconchange" rel="Ext.panel.Panel-event-iconchange" class="docClass">iconchange</a> event after completion. Set the iconCls for the panel's header. See <a href="#!/api/Ext.panel.Header-cfg-iconCls" rel="Ext.panel.Header-cfg-iconCls" class="docClass">Ext.panel.Header.iconCls</a>. It will fire the <a href="#!/api/Ext.panel.Panel-event-iconclschange" rel="Ext.panel.Panel-event-iconclschange" class="docClass">iconclschange</a> event after completion. This method allows you to show or hide a LoadMask on top of this component. Sets the overflow x/y on the content element of the component. The x/y overflow values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the value is 'hidden'. Passing null for one of the values will erase the inline style. Passing <code>undefined</code> will preserve the current value. Sets the page XY position of the component. To set the left and top instead, use <a href="#!/api/Ext.Component-method-setPosition" rel="Ext.Component-method-setPosition" class="docClass">setPosition</a>. This method fires the <a href="#!/api/Ext.Component-event-move" rel="Ext.Component-event-move" class="docClass">move</a> event. Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the <a href="#!/api/Ext.AbstractComponent-event-move" rel="Ext.AbstractComponent-event-move" class="docClass">move</a> event. Sets the width and height of this Component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method can accept either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>. Set a title for the panel's header. See <a href="#!/api/Ext.panel.Header-cfg-title" rel="Ext.panel.Header-cfg-title" class="docClass">Ext.panel.Header.title</a>. Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCls set on the component and rename them so they include the new UI Convenience function to hide or show this component by boolean. Sets the width of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. Shows this Component, rendering it first if <a href="#!/api/Ext.Component-cfg-autoRender" rel="Ext.Component-cfg-autoRender" class="docClass">autoRender</a> or <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> are <code>true</code>. After being shown, a <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Component (such as a <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>), is activated it and brought to the front of its <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">z-index stack</a>. Displays component at specific xy position. A floating component (like a menu) is positioned relative to its ownerCt if any. Useful for popping up a context menu: <pre><code>listeners: { itemcontextmenu: function(view, record, item, index, event, options) { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.menu.Menu" rel="Ext.menu.Menu" class="docClass">Ext.menu.Menu</a>', { width: 100, height: 100, margin: '0 0 10 0', items: [{ text: 'regular item 1' },{ text: 'regular item 2' },{ text: 'regular item 3' }] }).showAt(event.getXY()); } } </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of <a href="#!/api/Ext.util.Animate-method-sequenceFx" rel="Ext.util.Animate-method-sequenceFx" class="docClass">sequenceFx</a>. Sends this Component to the back of (lower z-index than) any other visible windows Brings this floating Component to the front of any other visible, floating Components managed by the same <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> If this Component is modal, inserts the modal mask just below this Component in the z-index stack. Shortcut for performing an <a href="#!/api/Ext.panel.Panel-method-expand" rel="Ext.panel.Panel-method-expand" class="docClass">expand</a> or <a href="#!/api/Ext.panel.Panel-method-collapse" rel="Ext.panel.Panel-method-collapse" class="docClass">collapse</a> based on the current state of the panel. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Walks up the <code>ownerCt</code> axis looking for an ancestor Container which matches the passed simple selector. Example: <pre><code>var owningTabPanel = grid.up('tabpanel'); </code></pre> Update the content area of a component. Sets the current box measurements of the component's underlying element. Updates this component's layout. If this update effects this components <a href="#!/api/Ext.AbstractComponent-property-ownerCt" rel="Ext.AbstractComponent-property-ownerCt" class="docClass">ownerCt</a>, that component's <code>updateLayout</code> method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout. Creates new Component. The configuration options may be specified as either: <ul> <li>an element : it is set as the internal element and its id used as the component id</li> <li>a string : it is assumed to be the id of an existing element and is used as the component id</li> <li>anything else : it is assumed to be a standard config object and is applied to the component</li> </ul>

Setting this property to <code>true</code> causes the <a href="#!/api/Ext.AbstractComponent-method-isLayoutRoot" rel="Ext.AbstractComponent-method-isLayoutRoot" class="docClass">isLayoutRoot</a> method to return <code>true</code> and stop the search for the top-most component for a layout. Indicates whether or not the component can be dragged. Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which were inserted as descendant items of floating Containers. Floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a> will not have a <code>floatParent</code> property. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are child items of a Container, the floatParent will be the floating ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides a <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> which provides z-indexing services for all its descendant floating Components. For example, the dropdown <a href="#!/api/Ext.view.BoundList" rel="Ext.view.BoundList" class="docClass">BoundList</a> of a ComboBox which is in a Window will have the Window as its <code>floatParent</code> See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">zIndexManager</a> Indicates the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the <a href="#!/api/Ext.AbstractComponent-cfg-frame" rel="Ext.AbstractComponent-cfg-frame" class="docClass">frame</a> config. This is an object containing the frame width in pixels for all four sides of the Component containing the following properties: The MixedCollection containing all the child items of this container. This is an internal flag that you use when creating custom components. By default this is set to true which means that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false since they want to implement custom disable logic. This Component's owner <a href="#!/api/Ext.container.Container" rel="Ext.container.Container" class="docClass">Container</a> (is set automatically when this Component is added to a Container). Note: to access items within the Container see <a href="#!/api/Ext.AbstractComponent-cfg-itemId" rel="Ext.AbstractComponent-cfg-itemId" class="docClass">itemId</a>. Indicates whether or not the component has been rendered. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components after they have been rendered. A reference to the ZIndexManager which is managing this Component's z-index. The <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> maintains a stack of floating Component z-indices, and also provides a single modal mask which is insert just beneath the topmost visible modal floating Component. Floating Components may be <a href="#!/api/Ext.Component-method-toFront" rel="Ext.Component-method-toFront" class="docClass">brought to the front</a> or <a href="#!/api/Ext.Component-method-toBack" rel="Ext.Component-method-toBack" class="docClass">sent to the back</a> of the z-index stack. This defaults to the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> for floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a>. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found which is floating, or if not found the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> is used. See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-floatParent" rel="Ext.Component-property-floatParent" class="docClass">floatParent</a> Adds <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a>(s) to this Container. <h2>Description:</h2> <ul> <li>Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before adding.</li> <li>The Container's <a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">default config values</a> will be applied accordingly (see <code><a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">defaults</a></code> for details).</li> <li>Fires the <code><a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a></code> event after the component has been added.</li> </ul> <h2>Notes:</h2> If the Container is already rendered when <code>add</code> is called, it will render the newly added Component into its content area. If the Container was configured with a size-managing <a href="#!/api/Ext.container.AbstractContainer-cfg-layout" rel="Ext.container.AbstractContainer-cfg-layout" class="docClass">layout</a> manager, the Container will recalculate its internal layout at this time too. Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing. If adding multiple new child Components, pass them as an array to the <code>add</code> method, so that only one layout recalculation is performed. <pre><code>tb = new <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Ext.toolbar.Toolbar</a>({ renderTo: document.body }); // toolbar is rendered // add multiple items. // (<a href="#!/api/Ext.container.AbstractContainer-cfg-defaultType" rel="Ext.container.AbstractContainer-cfg-defaultType" class="docClass">defaultType</a> for <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Toolbar</a> is 'button') tb.add([{text:'Button 1'}, {text:'Button 2'}]); </code></pre> To inject components between existing ones, use the <a href="#!/api/Ext.container.AbstractContainer-method-insert" rel="Ext.container.AbstractContainer-method-insert" class="docClass">insert</a> method. <h2>Warning:</h2> Components directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for <a href="#!/api/Ext.layout.container.Border" rel="Ext.layout.container.Border" class="docClass">BorderLayout</a> for more details. Adds each argument passed to this method to the childEls array. Adds a CSS class to the top level element representing this component. Adds a CSS class to the top level element representing this component. Adds a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-addUIClsToElement" rel="Ext.AbstractComponent-method-addUIClsToElement" class="docClass">addUIClsToElement</a> and adds to all elements of this component. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Save a property to the given state object if it is not its default or configured value. Add events that will trigger the state to be saved. If the first argument is an array, each element of that array is the name of a state event. Otherwise, each argument passed to this method is the name of a state event. Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element. Called by the layout system when the Component has been layed out. Aligns this floating Component to the specified element Perform custom animation on this object. This method is applicable to both the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a> class and the <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a> class. It performs animated transitions of certain properties of this object over a specified timeline. The sole parameter is an object which specifies start property values, end property values, and properties which describe the timeline. <h3>Animating an <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a></h3> When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The page X position in pixels.</li> <li><code>y</code> - The page Y position in pixels</li> <li><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</li> <li><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</li> <li><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</li> <li><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</li> <li><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</li> <li><code>scrollTop</code> - The element's <code>scrollLeft</code> value.</li> <li><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</li> </ul> Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components. <h3>Animating a <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a></h3> When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The Component's page X position in pixels.</li> <li><code>y</code> - The Component's page Y position in pixels</li> <li><code>left</code> - The Component's <code>left</code> value in pixels.</li> <li><code>top</code> - The Component's <code>top</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.</li> </ul> For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct: <pre><code>myWindow = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>', { title: 'Test Component animation', width: 500, height: 300, layout: { type: 'hbox', align: 'stretch' }, items: [{ title: 'Left: 33%', margins: '5 0 5 5', flex: 1 }, { title: 'Left: 66%', margins: '5 5 5 5', flex: 2 }] }); myWindow.show(); myWindow.header.el.on('click', function() { myWindow.animate({ to: { width: (myWindow.getWidth() == 500) ? 700 : 500, height: (myWindow.getHeight() == 300) ? 400 : 300, } }); }); </code></pre> For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation. Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object. Utility wrapper that suspends layouts of all components for the duration of a given function. Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed. Occurs before componentLayout is run. Returning false from this method will prevent the containerLayout from being executed. Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Cascades down the component/container heirarchy from this component (passed in the first call), calling the specified function with each component. The scope (this reference) of the function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the cascade is stopped on that branch. Center this Component in its container. Retrieves the first direct child of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Clone the current component using the original config values passed into this instance by default. Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their appropriate instances. Destroys the Component. Disable the component. Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body This method needs to be called whenever you change something on this component that requires the Component's layout to be recalculated. Moves this floating Component into a constrain region. By default, this Component is constrained to be within the container it was added to, or the element it was rendered to. An alternative constraint may be passed. Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts form most cases. Retrieves the first descendant of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Enable the component Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Ensures that this component is attached to <code>document.body</code>. If the component was rendered to Ext.getDetachedBody, then it will be appended to <code>document.body</code>. Any configured position is also restored. Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. Find a container above this component at any level by xtype or class See also the <a href="#!/api/Ext.Component-method-up" rel="Ext.Component-method-up" class="docClass">up</a> method. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Try to focus this component. Forces this component to redo its componentLayout. Returns the current animation if this object has any effects actively running or queued, else returns false. Gets the current box measurements of the component's underlying element. Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. Return the immediate child Component in which the passed element is located. Examines this container's <a href="#!/api/Ext.container.AbstractContainer-property-items" rel="Ext.container.AbstractContainer-property-items" class="docClass">items</a> property and gets a direct child component of this container. Retrieves the top level element representing this component. Gets the current height of the component's underlying element. Retrieves the id of this component. Will autogenerate an id if one has not already been set. This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore. Returns the <a href="#!/api/Ext.layout.container.Container" rel="Ext.layout.container.Container" class="docClass">layout</a> instance currently associated with this Container. If a layout has not been instantiated yet, that is done first Gets the <a href="#!/api/Ext.ComponentLoader" rel="Ext.ComponentLoader" class="docClass">Ext.ComponentLoader</a> for this Component. Retrieves a plugin by its pluginId which has been bound to this component. Gets the current XY position of the component's underlying element. Gets the current size of the component's underlying element. Returns an object that describes how this component's width and height is managed. These objects are shared and should not be modified. The supplied default state gathering method for the AbstractComponent class. This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code> state. Subclasses which implement more complex state should call the superclass's implementation, and apply their state to the result if this basic state is to be saved. Note that Component state will only be saved if the Component has a <a href="#!/api/Ext.AbstractComponent-cfg-stateId" rel="Ext.AbstractComponent-cfg-stateId" class="docClass">stateId</a> and there as a StateProvider configured for the document. Gets the state id for this object. Gets the current width of the component's underlying element. Gets the xtype for this component as registered with <a href="#!/api/Ext.ComponentManager" rel="Ext.ComponentManager" class="docClass">Ext.ComponentManager</a>. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXType()); // alerts 'textfield' </code></pre> Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXTypes()); // alerts 'component/field/textfield' </code></pre> Returns the current animation if this object has any effects actively running or queued, else returns false. Checks if the specified CSS class exists on this element's DOM node. Checks to see if this object has any listeners for a specified event Checks if there is currently a specified uiCls Hides this Component, setting it to invisible using the configured <a href="#!/api/Ext.Component-cfg-hideMode" rel="Ext.Component-cfg-hideMode" class="docClass">hideMode</a>. The initComponent template method is an important initialization step for a Component. It is intended to be implemented by each subclass of <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to <a href="#!/api/Ext.Base-method-callParent" rel="Ext.Base-method-callParent" class="docClass">callParent</a> in order to ensure that the parent class' initComponent method is also called. All config options passed to the constructor are applied to <code>this</code> before initComponent is called, so you can simply access them with <code>this.someOption</code>. The following example demonstrates using a dynamic string for the text of a button at the time of instantiation of the class. <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('DynamicButtonText', { extend: '<a href="#!/api/Ext.button.Button" rel="Ext.button.Button" class="docClass">Ext.button.Button</a>', initComponent: function() { this.text = new Date(); this.renderTo = <a href="#!/api/Ext-method-getBody" rel="Ext-method-getBody" class="docClass">Ext.getBody</a>(); this.callParent(); } }); <a href="#!/api/Ext-method-onReady" rel="Ext-method-onReady" class="docClass">Ext.onReady</a>(function() { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('DynamicButtonText'); }); </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Inserts a Component into this Container at a specified index. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before inserting, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a> event after the Component has been inserted. Tests whether this Component matches the selector string. Determines whether this Container is an ancestor of the passed Component. This will return <code>true</code> if the passed Component is anywhere within the subtree beneath this Container. Determines whether this component is the descendant of a particular container. Method to determine whether this Component is currently disabled. Method to determine whether this Component is draggable. Method to determine whether this Component is droppable. Method to determine whether this Component is floating. Method to determine whether this Component is currently set to hidden. Determines whether this Component is the root of a layout. This returns <code>true</code> if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, <code>false</code> is returned and its owner will be considered as the next candidate for the layout root. Setting the <a href="#!/api/Ext.AbstractComponent-property-_isLayoutRoot" rel="Ext.AbstractComponent-property-_isLayoutRoot" class="docClass">_isLayoutRoot</a> property to <code>true</code> causes this method to always return <code>true</code>. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run. Returns true if layout is suspended for this component. This can come from direct suspension of this component's layout activity (suspendLayouts) or if one of this component's containers is suspended. Returns true if this component is visible. Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); var isText = t.isXType('textfield'); // true var isBoxSubclass = t.isXType('field'); // true, descended from <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> var isBoxInstance = t.isXType('field', true); // false, not a direct <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> instance </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Moves a Component within the Container Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Returns the next node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextSibling" rel="Ext.AbstractComponent-method-nextSibling" class="docClass">nextSibling</a>. Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>next()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextNode" rel="Ext.AbstractComponent-method-nextNode" class="docClass">nextNode</a> Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Template method called when this Component's DOM structure is created. At this point, this Component's (And all descendants') DOM structure exists but it has not been layed out (positioned and sized). Subclasses which override this to gain access to the structure at render time should call the parent class's method before attempting to access any child elements of the Component. Returns the previous node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousSibling" rel="Ext.AbstractComponent-method-previousSibling" class="docClass">previousSibling</a>. Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>prev()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousNode" rel="Ext.AbstractComponent-method-previousNode" class="docClass">previousNode</a> Retrieves all descendant components which match the passed selector. Executes an <a href="#!/api/Ext.ComponentQuery-method-query" rel="Ext.ComponentQuery-method-query" class="docClass">Ext.ComponentQuery.query</a> using this container as its root. Retrieves all descendant components which match the passed function. The function should return false for components that are to be excluded from the selection. Finds a component at any level under this container matching the id/itemId. This is a shorthand for calling ct.down('#' + id); Called by Component#doAutoRender Register a Container configured <code>floating: true</code> with this Component's <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a>. Components added in ths way will not participate in any layout, but will be rendered upon first show in the way that <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Window</a>s are. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes a component from this container. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeremove" rel="Ext.container.AbstractContainer-event-beforeremove" class="docClass">beforeremove</a> event before removing, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-remove" rel="Ext.container.AbstractContainer-event-remove" class="docClass">remove</a> event after the component has been removed. Removes all components from this container. 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. Removes a CSS class from the top level element representing this component. Removes a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-removeUIClsFromElement" rel="Ext.AbstractComponent-method-removeUIClsFromElement" class="docClass">removeUIClsFromElement</a> and removes it from all elements of this component. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Method which removes a specified UI + uiCls from the components element. The cls which is added to the element will be: <code>this.baseCls + '-' + ui</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Conditionally saves a single property from this object to the given state object. The idea is to only save state which has changed from the initial state so that current software settings do not override future software settings. Only those values that are user-changed state should be saved. Scrolls this Component's target element by the passed delta values, optionally animating. All of the following are equivalent: <pre><code> comp.scrollBy(10, 10, true); comp.scrollBy([10, 10], true); comp.scrollBy({ x: 10, y: 10 }, true); </code></pre> Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of <a href="#!/api/Ext.util.Animate-method-syncFx" rel="Ext.util.Animate-method-syncFx" class="docClass">syncFx</a>. This method is called internally by <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">Ext.ZIndexManager</a> to signal that a floating Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack. If a Window is superceded by another Window, deactivating it hides its shadow. This method also fires the <a href="#!/api/Ext.Component-event-activate" rel="Ext.Component-event-activate" class="docClass">activate</a> or <a href="#!/api/Ext.Component-event-deactivate" rel="Ext.Component-event-deactivate" class="docClass">deactivate</a> event depending on which action occurred. Sets the overflow on the content element of the component. Enable or disable the component. Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default) Sets the height of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method allows you to show or hide a LoadMask on top of this component. Sets the overflow x/y on the content element of the component. The x/y overflow values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the value is 'hidden'. Passing null for one of the values will erase the inline style. Passing <code>undefined</code> will preserve the current value. Sets the page XY position of the component. To set the left and top instead, use <a href="#!/api/Ext.Component-method-setPosition" rel="Ext.Component-method-setPosition" class="docClass">setPosition</a>. This method fires the <a href="#!/api/Ext.Component-event-move" rel="Ext.Component-event-move" class="docClass">move</a> event. Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the <a href="#!/api/Ext.AbstractComponent-event-move" rel="Ext.AbstractComponent-event-move" class="docClass">move</a> event. Sets the width and height of this Component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method can accept either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>. Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCls set on the component and rename them so they include the new UI Convenience function to hide or show this component by boolean. Sets the width of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. Shows this Component, rendering it first if <a href="#!/api/Ext.Component-cfg-autoRender" rel="Ext.Component-cfg-autoRender" class="docClass">autoRender</a> or <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> are <code>true</code>. After being shown, a <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Component (such as a <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>), is activated it and brought to the front of its <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">z-index stack</a>. Displays component at specific xy position. A floating component (like a menu) is positioned relative to its ownerCt if any. Useful for popping up a context menu: <pre><code>listeners: { itemcontextmenu: function(view, record, item, index, event, options) { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.menu.Menu" rel="Ext.menu.Menu" class="docClass">Ext.menu.Menu</a>', { width: 100, height: 100, margin: '0 0 10 0', items: [{ text: 'regular item 1' },{ text: 'regular item 2' },{ text: 'regular item 3' }] }).showAt(event.getXY()); } } </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of <a href="#!/api/Ext.util.Animate-method-sequenceFx" rel="Ext.util.Animate-method-sequenceFx" class="docClass">sequenceFx</a>. Sends this Component to the back of (lower z-index than) any other visible windows Brings this floating Component to the front of any other visible, floating Components managed by the same <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> If this Component is modal, inserts the modal mask just below this Component in the z-index stack. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Walks up the <code>ownerCt</code> axis looking for an ancestor Container which matches the passed simple selector. Example: <pre><code>var owningTabPanel = grid.up('tabpanel'); </code></pre> Update the content area of a component. Sets the current box measurements of the component's underlying element. Updates this component's layout. If this update effects this components <a href="#!/api/Ext.AbstractComponent-property-ownerCt" rel="Ext.AbstractComponent-property-ownerCt" class="docClass">ownerCt</a>, that component's <code>updateLayout</code> method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds docked item(s) to the container. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Finds a docked component by id, itemId or position. Also see <a href="#!/api/Ext.container.DockingContainer-method-getDockedItems" rel="Ext.container.DockingContainer-method-getDockedItems" class="docClass">getDockedItems</a> Retrieves an array of all currently docked Components. For example to find a toolbar that has been docked at top: <pre><code>panel.getDockedItems('toolbar[dock="top"]'); </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Inserts docked item(s) to the panel at the indicated position. Removes the docked item from the panel. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates new Component. The configuration options may be specified as either: <ul> <li>an element : it is set as the internal element and its id used as the component id</li> <li>a string : it is assumed to be the id of an existing element and is used as the component id</li> <li>anything else : it is assumed to be a standard config object and is applied to the component</li> </ul>

Setting this property to <code>true</code> causes the <a href="#!/api/Ext.AbstractComponent-method-isLayoutRoot" rel="Ext.AbstractComponent-method-isLayoutRoot" class="docClass">isLayoutRoot</a> method to return <code>true</code> and stop the search for the top-most component for a layout. Indicates whether or not the component can be dragged. Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which were inserted as descendant items of floating Containers. Floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a> will not have a <code>floatParent</code> property. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are child items of a Container, the floatParent will be the floating ancestor Container which is responsible for the base z-index value of all its floating descendants. It provides a <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> which provides z-indexing services for all its descendant floating Components. For example, the dropdown <a href="#!/api/Ext.view.BoundList" rel="Ext.view.BoundList" class="docClass">BoundList</a> of a ComboBox which is in a Window will have the Window as its <code>floatParent</code> See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">zIndexManager</a> Indicates the width of any framing elements which were added within the encapsulating element to provide graphical, rounded borders. See the <a href="#!/api/Ext.AbstractComponent-cfg-frame" rel="Ext.AbstractComponent-cfg-frame" class="docClass">frame</a> config. This is an object containing the frame width in pixels for all four sides of the Component containing the following properties: The MixedCollection containing all the child items of this container. This is an internal flag that you use when creating custom components. By default this is set to true which means that every component gets a mask when its disabled. Components like FieldContainer, FieldSet, Field, Button, Tab override this property to false since they want to implement custom disable logic. This Component's owner <a href="#!/api/Ext.container.Container" rel="Ext.container.Container" class="docClass">Container</a> (is set automatically when this Component is added to a Container). Note: to access items within the Container see <a href="#!/api/Ext.AbstractComponent-cfg-itemId" rel="Ext.AbstractComponent-cfg-itemId" class="docClass">itemId</a>. Indicates whether or not the component has been rendered. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Only present for <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components after they have been rendered. A reference to the ZIndexManager which is managing this Component's z-index. The <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> maintains a stack of floating Component z-indices, and also provides a single modal mask which is insert just beneath the topmost visible modal floating Component. Floating Components may be <a href="#!/api/Ext.Component-method-toFront" rel="Ext.Component-method-toFront" class="docClass">brought to the front</a> or <a href="#!/api/Ext.Component-method-toBack" rel="Ext.Component-method-toBack" class="docClass">sent to the back</a> of the z-index stack. This defaults to the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> for floating Components that are programatically <a href="#!/api/Ext.Component-event-render" rel="Ext.Component-event-render" class="docClass">rendered</a>. For <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Components which are added to a Container, the ZIndexManager is acquired from the first ancestor Container found which is floating, or if not found the global <a href="#!/api/Ext.WindowManager" rel="Ext.WindowManager" class="docClass">ZIndexManager</a> is used. See <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> and <a href="#!/api/Ext.Component-property-floatParent" rel="Ext.Component-property-floatParent" class="docClass">floatParent</a> Adds <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a>(s) to this Container. <h2>Description:</h2> <ul> <li>Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before adding.</li> <li>The Container's <a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">default config values</a> will be applied accordingly (see <code><a href="#!/api/Ext.container.AbstractContainer-cfg-defaults" rel="Ext.container.AbstractContainer-cfg-defaults" class="docClass">defaults</a></code> for details).</li> <li>Fires the <code><a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a></code> event after the component has been added.</li> </ul> <h2>Notes:</h2> If the Container is already rendered when <code>add</code> is called, it will render the newly added Component into its content area. If the Container was configured with a size-managing <a href="#!/api/Ext.container.AbstractContainer-cfg-layout" rel="Ext.container.AbstractContainer-cfg-layout" class="docClass">layout</a> manager, the Container will recalculate its internal layout at this time too. Note that the default layout manager simply renders child Components sequentially into the content area and thereafter performs no sizing. If adding multiple new child Components, pass them as an array to the <code>add</code> method, so that only one layout recalculation is performed. <pre><code>tb = new <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Ext.toolbar.Toolbar</a>({ renderTo: document.body }); // toolbar is rendered // add multiple items. // (<a href="#!/api/Ext.container.AbstractContainer-cfg-defaultType" rel="Ext.container.AbstractContainer-cfg-defaultType" class="docClass">defaultType</a> for <a href="#!/api/Ext.toolbar.Toolbar" rel="Ext.toolbar.Toolbar" class="docClass">Toolbar</a> is 'button') tb.add([{text:'Button 1'}, {text:'Button 2'}]); </code></pre> To inject components between existing ones, use the <a href="#!/api/Ext.container.AbstractContainer-method-insert" rel="Ext.container.AbstractContainer-method-insert" class="docClass">insert</a> method. <h2>Warning:</h2> Components directly managed by the BorderLayout layout manager may not be removed or added. See the Notes for <a href="#!/api/Ext.layout.container.Border" rel="Ext.layout.container.Border" class="docClass">BorderLayout</a> for more details. Adds each argument passed to this method to the childEls array. Adds a CSS class to the top level element representing this component. Adds a CSS class to the top level element representing this component. Adds a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-addUIClsToElement" rel="Ext.AbstractComponent-method-addUIClsToElement" class="docClass">addUIClsToElement</a> and adds to all elements of this component. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Save a property to the given state object if it is not its default or configured value. Add events that will trigger the state to be saved. If the first argument is an array, each element of that array is the name of a state event. Otherwise, each argument passed to this method is the name of a state event. Method which adds a specified UI + uiCls to the components element. Can be overridden to remove the UI from more than just the components element. Called by the layout system when the Component has been layed out. Aligns this floating Component to the specified element Perform custom animation on this object. This method is applicable to both the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a> class and the <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a> class. It performs animated transitions of certain properties of this object over a specified timeline. The sole parameter is an object which specifies start property values, end property values, and properties which describe the timeline. <h3>Animating an <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Element</a></h3> When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The page X position in pixels.</li> <li><code>y</code> - The page Y position in pixels</li> <li><code>left</code> - The element's CSS <code>left</code> value. Units must be supplied.</li> <li><code>top</code> - The element's CSS <code>top</code> value. Units must be supplied.</li> <li><code>width</code> - The element's CSS <code>width</code> value. Units must be supplied.</li> <li><code>height</code> - The element's CSS <code>height</code> value. Units must be supplied.</li> <li><code>scrollLeft</code> - The element's <code>scrollLeft</code> value.</li> <li><code>scrollTop</code> - The element's <code>scrollLeft</code> value.</li> <li><code>opacity</code> - The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</li> </ul> Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components. <h3>Animating a <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Component</a></h3> When animating a Component, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects: <ul> <li><code>x</code> - The Component's page X position in pixels.</li> <li><code>y</code> - The Component's page Y position in pixels</li> <li><code>left</code> - The Component's <code>left</code> value in pixels.</li> <li><code>top</code> - The Component's <code>top</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>width</code> - The Component's <code>width</code> value in pixels.</li> <li><code>dynamic</code> - Specify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.</li> </ul> For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct: <pre><code>myWindow = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>', { title: 'Test Component animation', width: 500, height: 300, layout: { type: 'hbox', align: 'stretch' }, items: [{ title: 'Left: 33%', margins: '5 0 5 5', flex: 1 }, { title: 'Left: 66%', margins: '5 5 5 5', flex: 2 }] }); myWindow.show(); myWindow.header.el.on('click', function() { myWindow.animate({ to: { width: (myWindow.getWidth() == 500) ? 700 : 500, height: (myWindow.getHeight() == 300) ? 400 : 300, } }); }); </code></pre> For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation. Applies the state to the object. This should be overridden in subclasses to do more complex state operations. By default it applies the state properties onto the current object. Utility wrapper that suspends layouts of all components for the duration of a given function. Occurs before componentLayout is run. Returning false from this method will prevent the componentLayout from being executed. Occurs before componentLayout is run. Returning false from this method will prevent the containerLayout from being executed. Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the bubble is stopped. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Cascades down the component/container heirarchy from this component (passed in the first call), calling the specified function with each component. The scope (this reference) of the function call will be the scope provided or the current component. The arguments to the function will be the args provided or the current component. If the function returns false at any point, the cascade is stopped on that branch. Center this Component in its container. Retrieves the first direct child of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Clone the current component using the original config values passed into this instance by default. Ensures that the plugins array contains fully constructed plugin instances. This converts any configs into their appropriate instances. Destroys the Component. Disable the component. Handles autoRender. Floating Components may have an ownerCt. If they are asking to be constrained, constrain them within that ownerCt, and have their z-index managed locally. Floating Components are always rendered to document.body This method needs to be called whenever you change something on this component that requires the Component's layout to be recalculated. Moves this floating Component into a constrain region. By default, this Component is constrained to be within the container it was added to, or the element it was rendered to. An alternative constraint may be passed. Manually force this container's layout to be recalculated. The framework uses this internally to refresh layouts form most cases. Retrieves the first descendant of this container which matches the passed selector. The passed in selector must comply with an <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">Ext.ComponentQuery</a> selector. Enable the component Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Ensures that this component is attached to <code>document.body</code>. If the component was rendered to Ext.getDetachedBody, then it will be appended to <code>document.body</code>. Any configured position is also restored. Find a container above this component at any level by a custom function. If the passed function returns true, the container will be returned. Find a container above this component at any level by xtype or class See also the <a href="#!/api/Ext.Component-method-up" rel="Ext.Component-method-up" class="docClass">up</a> method. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Try to focus this component. Forces this component to redo its componentLayout. Returns the current animation if this object has any effects actively running or queued, else returns false. Gets the current box measurements of the component's underlying element. Provides the link for Observable's fireEvent method to bubble up the ownership hierarchy. Return the immediate child Component in which the passed element is located. Examines this container's <a href="#!/api/Ext.container.AbstractContainer-property-items" rel="Ext.container.AbstractContainer-property-items" class="docClass">items</a> property and gets a direct child component of this container. Retrieves the top level element representing this component. Gets the current height of the component's underlying element. Retrieves the id of this component. Will autogenerate an id if one has not already been set. This function takes the position argument passed to onRender and returns a DOM element that you can use in the insertBefore. Returns the <a href="#!/api/Ext.layout.container.Container" rel="Ext.layout.container.Container" class="docClass">layout</a> instance currently associated with this Container. If a layout has not been instantiated yet, that is done first Gets the <a href="#!/api/Ext.ComponentLoader" rel="Ext.ComponentLoader" class="docClass">Ext.ComponentLoader</a> for this Component. Retrieves a plugin by its pluginId which has been bound to this component. Gets the current XY position of the component's underlying element. Gets the current size of the component's underlying element. Returns an object that describes how this component's width and height is managed. These objects are shared and should not be modified. The supplied default state gathering method for the AbstractComponent class. This method returns dimension settings such as <code>flex</code>, <code>anchor</code>, <code>width</code> and <code>height</code> along with <code>collapsed</code> state. Subclasses which implement more complex state should call the superclass's implementation, and apply their state to the result if this basic state is to be saved. Note that Component state will only be saved if the Component has a <a href="#!/api/Ext.AbstractComponent-cfg-stateId" rel="Ext.AbstractComponent-cfg-stateId" class="docClass">stateId</a> and there as a StateProvider configured for the document. Gets the state id for this object. Gets the current width of the component's underlying element. Gets the xtype for this component as registered with <a href="#!/api/Ext.ComponentManager" rel="Ext.ComponentManager" class="docClass">Ext.ComponentManager</a>. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXType()); // alerts 'textfield' </code></pre> Returns this Component's xtype hierarchy as a slash-delimited string. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); alert(t.getXTypes()); // alerts 'component/field/textfield' </code></pre> Returns the current animation if this object has any effects actively running or queued, else returns false. Checks if the specified CSS class exists on this element's DOM node. Checks to see if this object has any listeners for a specified event Checks if there is currently a specified uiCls Hides this Component, setting it to invisible using the configured <a href="#!/api/Ext.Component-cfg-hideMode" rel="Ext.Component-cfg-hideMode" class="docClass">hideMode</a>. The initComponent template method is an important initialization step for a Component. It is intended to be implemented by each subclass of <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> to provide any needed constructor logic. The initComponent method of the class being created is called first, with each initComponent method up the hierarchy to <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> being called thereafter. This makes it easy to implement and, if needed, override the constructor logic of the Component at any step in the hierarchy. The initComponent method must contain a call to <a href="#!/api/Ext.Base-method-callParent" rel="Ext.Base-method-callParent" class="docClass">callParent</a> in order to ensure that the parent class' initComponent method is also called. All config options passed to the constructor are applied to <code>this</code> before initComponent is called, so you can simply access them with <code>this.someOption</code>. The following example demonstrates using a dynamic string for the text of a button at the time of instantiation of the class. <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('DynamicButtonText', { extend: '<a href="#!/api/Ext.button.Button" rel="Ext.button.Button" class="docClass">Ext.button.Button</a>', initComponent: function() { this.text = new Date(); this.renderTo = <a href="#!/api/Ext-method-getBody" rel="Ext-method-getBody" class="docClass">Ext.getBody</a>(); this.callParent(); } }); <a href="#!/api/Ext-method-onReady" rel="Ext-method-onReady" class="docClass">Ext.onReady</a>(function() { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('DynamicButtonText'); }); </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Inserts a Component into this Container at a specified index. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeadd" rel="Ext.container.AbstractContainer-event-beforeadd" class="docClass">beforeadd</a> event before inserting, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-add" rel="Ext.container.AbstractContainer-event-add" class="docClass">add</a> event after the Component has been inserted. Tests whether this Component matches the selector string. Determines whether this Container is an ancestor of the passed Component. This will return <code>true</code> if the passed Component is anywhere within the subtree beneath this Container. Determines whether this component is the descendant of a particular container. Method to determine whether this Component is currently disabled. Method to determine whether this Component is draggable. Method to determine whether this Component is droppable. Method to determine whether this Component is floating. Method to determine whether this Component is currently set to hidden. Determines whether this Component is the root of a layout. This returns <code>true</code> if this component can run its layout without assistance from or impact on its owner. If this component cannot run its layout given these restrictions, <code>false</code> is returned and its owner will be considered as the next candidate for the layout root. Setting the <a href="#!/api/Ext.AbstractComponent-property-_isLayoutRoot" rel="Ext.AbstractComponent-property-_isLayoutRoot" class="docClass">_isLayoutRoot</a> property to <code>true</code> causes this method to always return <code>true</code>. This may be useful when updating a layout of a Container which shrink wraps content, and you know that it will not change size, and so can safely be the topmost participant in the layout run. Returns true if layout is suspended for this component. This can come from direct suspension of this component's layout activity (suspendLayouts) or if one of this component's containers is suspended. Returns true if this component is visible. Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended from the xtype (default) or whether it is directly of the xtype specified (shallow = true). If using your own subclasses, be aware that a Component must register its own xtype to participate in determination of inherited xtypes. For a list of all available xtypes, see the <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> header. Example usage: <pre><code>var t = new <a href="#!/api/Ext.form.field.Text" rel="Ext.form.field.Text" class="docClass">Ext.form.field.Text</a>(); var isText = t.isXType('textfield'); // true var isBoxSubclass = t.isXType('field'); // true, descended from <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> var isBoxInstance = t.isXType('field', true); // false, not a direct <a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a> instance </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Moves a Component within the Container Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Returns the next node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextSibling" rel="Ext.AbstractComponent-method-nextSibling" class="docClass">nextSibling</a>. Returns the next sibling of this Component. Optionally selects the next sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>next()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-nextNode" rel="Ext.AbstractComponent-method-nextNode" class="docClass">nextNode</a> Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Template method called when this Component's DOM structure is created. At this point, this Component's (And all descendants') DOM structure exists but it has not been layed out (positioned and sized). Subclasses which override this to gain access to the structure at render time should call the parent class's method before attempting to access any child elements of the Component. Returns the previous node in the Component tree in tree traversal order. Note that this is not limited to siblings, and if invoked upon a node with no matching siblings, will walk the tree in reverse order to attempt to find a match. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousSibling" rel="Ext.AbstractComponent-method-previousSibling" class="docClass">previousSibling</a>. Returns the previous sibling of this Component. Optionally selects the previous sibling which matches the passed <a href="#!/api/Ext.ComponentQuery" rel="Ext.ComponentQuery" class="docClass">ComponentQuery</a> selector. May also be refered to as <code>prev()</code> Note that this is limited to siblings, and if no siblings of the item match, <code>null</code> is returned. Contrast with <a href="#!/api/Ext.AbstractComponent-method-previousNode" rel="Ext.AbstractComponent-method-previousNode" class="docClass">previousNode</a> Retrieves all descendant components which match the passed selector. Executes an <a href="#!/api/Ext.ComponentQuery-method-query" rel="Ext.ComponentQuery-method-query" class="docClass">Ext.ComponentQuery.query</a> using this container as its root. Retrieves all descendant components which match the passed function. The function should return false for components that are to be excluded from the selection. Finds a component at any level under this container matching the id/itemId. This is a shorthand for calling ct.down('#' + id); Called by Component#doAutoRender Register a Container configured <code>floating: true</code> with this Component's <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a>. Components added in ths way will not participate in any layout, but will be rendered upon first show in the way that <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Window</a>s are. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes a component from this container. Fires the <a href="#!/api/Ext.container.AbstractContainer-event-beforeremove" rel="Ext.container.AbstractContainer-event-beforeremove" class="docClass">beforeremove</a> event before removing, then fires the <a href="#!/api/Ext.container.AbstractContainer-event-remove" rel="Ext.container.AbstractContainer-event-remove" class="docClass">remove</a> event after the component has been removed. Removes all components from this container. 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. Removes a CSS class from the top level element representing this component. Removes a cls to the uiCls array, which will also call <a href="#!/api/Ext.AbstractComponent-method-removeUIClsFromElement" rel="Ext.AbstractComponent-method-removeUIClsFromElement" class="docClass">removeUIClsFromElement</a> and removes it from all elements of this component. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Method which removes a specified UI + uiCls from the components element. The cls which is added to the element will be: <code>this.baseCls + '-' + ui</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Conditionally saves a single property from this object to the given state object. The idea is to only save state which has changed from the initial state so that current software settings do not override future software settings. Only those values that are user-changed state should be saved. Scrolls this Component's target element by the passed delta values, optionally animating. All of the following are equivalent: <pre><code> comp.scrollBy(10, 10, true); comp.scrollBy([10, 10], true); comp.scrollBy({ x: 10, y: 10 }, true); </code></pre> Ensures that all effects queued after sequenceFx is called on this object are run in sequence. This is the opposite of <a href="#!/api/Ext.util.Animate-method-syncFx" rel="Ext.util.Animate-method-syncFx" class="docClass">syncFx</a>. This method is called internally by <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">Ext.ZIndexManager</a> to signal that a floating Component has either been moved to the top of its zIndex stack, or pushed from the top of its zIndex stack. If a Window is superceded by another Window, deactivating it hides its shadow. This method also fires the <a href="#!/api/Ext.Component-event-activate" rel="Ext.Component-event-activate" class="docClass">activate</a> or <a href="#!/api/Ext.Component-event-deactivate" rel="Ext.Component-event-deactivate" class="docClass">deactivate</a> event depending on which action occurred. Sets the overflow on the content element of the component. Enable or disable the component. Sets the dock position of this component in its parent panel. Note that this only has effect if this item is part of the dockedItems collection of a parent that has a DockLayout (note that any Panel has a DockLayout by default) Sets the height of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method allows you to show or hide a LoadMask on top of this component. Sets the overflow x/y on the content element of the component. The x/y overflow values can be any valid CSS overflow (e.g., 'auto' or 'scroll'). By default, the value is 'hidden'. Passing null for one of the values will erase the inline style. Passing <code>undefined</code> will preserve the current value. Sets the page XY position of the component. To set the left and top instead, use <a href="#!/api/Ext.Component-method-setPosition" rel="Ext.Component-method-setPosition" class="docClass">setPosition</a>. This method fires the <a href="#!/api/Ext.Component-event-move" rel="Ext.Component-event-move" class="docClass">move</a> event. Sets the left and top of the component. To set the page XY position instead, use setPagePosition. This method fires the <a href="#!/api/Ext.AbstractComponent-event-move" rel="Ext.AbstractComponent-event-move" class="docClass">move</a> event. Sets the width and height of this Component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. This method can accept either width and height as separate arguments, or you can pass a size object like <code>{width:10, height:20}</code>. Sets the UI for the component. This will remove any existing UIs on the component. It will also loop through any uiCls set on the component and rename them so they include the new UI Convenience function to hide or show this component by boolean. Sets the width of the component. This method fires the <a href="#!/api/Ext.AbstractComponent-event-resize" rel="Ext.AbstractComponent-event-resize" class="docClass">resize</a> event. Shows this Component, rendering it first if <a href="#!/api/Ext.Component-cfg-autoRender" rel="Ext.Component-cfg-autoRender" class="docClass">autoRender</a> or <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> are <code>true</code>. After being shown, a <a href="#!/api/Ext.Component-cfg-floating" rel="Ext.Component-cfg-floating" class="docClass">floating</a> Component (such as a <a href="#!/api/Ext.window.Window" rel="Ext.window.Window" class="docClass">Ext.window.Window</a>), is activated it and brought to the front of its <a href="#!/api/Ext.Component-property-zIndexManager" rel="Ext.Component-property-zIndexManager" class="docClass">z-index stack</a>. Displays component at specific xy position. A floating component (like a menu) is positioned relative to its ownerCt if any. Useful for popping up a context menu: <pre><code>listeners: { itemcontextmenu: function(view, record, item, index, event, options) { <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.menu.Menu" rel="Ext.menu.Menu" class="docClass">Ext.menu.Menu</a>', { width: 100, height: 100, margin: '0 0 10 0', items: [{ text: 'regular item 1' },{ text: 'regular item 2' },{ text: 'regular item 3' }] }).showAt(event.getXY()); } } </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet. Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of <a href="#!/api/Ext.util.Animate-method-sequenceFx" rel="Ext.util.Animate-method-sequenceFx" class="docClass">sequenceFx</a>. Sends this Component to the back of (lower z-index than) any other visible windows Brings this floating Component to the front of any other visible, floating Components managed by the same <a href="#!/api/Ext.ZIndexManager" rel="Ext.ZIndexManager" class="docClass">ZIndexManager</a> If this Component is modal, inserts the modal mask just below this Component in the z-index stack. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Walks up the <code>ownerCt</code> axis looking for an ancestor Container which matches the passed simple selector. Example: <pre><code>var owningTabPanel = grid.up('tabpanel'); </code></pre> Update the content area of a component. Sets the current box measurements of the component's underlying element. Updates this component's layout. If this update effects this components <a href="#!/api/Ext.AbstractComponent-property-ownerCt" rel="Ext.AbstractComponent-property-ownerCt" class="docClass">ownerCt</a>, that component's <code>updateLayout</code> method will be called to perform the layout instead. Otherwise, just this component (and its child items) will layout. Sets the updating behavior based on batch synchronization. 'operation' (the default) will update the Store's internal representation of the data after each operation of the batch has completed, 'complete' will wait until the entire batch has been completed before updating the Store's data. 'complete' is a good choice for local storage proxies, 'operation' is better for remote proxies, where there is a comparatively high latency. The string type of the Proxy to create if none is specified. This defaults to creating a <a href="#!/api/Ext.data.proxy.Memory" rel="Ext.data.proxy.Memory" class="docClass">memory proxy</a>. The default sort direction to use if one is not specified. If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired. Defaults to true, ignored if <a href="#!/api/Ext.data.Store-cfg-remoteFilter" rel="Ext.data.Store-cfg-remoteFilter" class="docClass">remoteFilter</a> is true The collection of <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Filters</a> currently applied to this Store True if the Store has already been destroyed. If this is true, the reference to Store should be deleted as it will not function correctly any more. Flag denoting that this object is sortable. Always true. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired. Defaults to true, igored if <a href="#!/api/Ext.data.Store-cfg-remoteSort" rel="Ext.data.Store-cfg-remoteSort" class="docClass">remoteSort</a> is true The property in each item that contains the data to sort. The collection of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Sorters</a> currently applied to this Store Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns a comparator function which compares two items and returns -1, 0, or 1 depending on the currently defined set of <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a>. If there are no <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a> defined, it returns a function which returns <code>0</code> meaning that no sorting will occur. Gets all <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">records</a> added or updated since the last commit. Note that the order of records returned is not deterministic and does not indicate the order in which records were modified. Note also that removed records are not included (use <a href="#!/api/Ext.data.AbstractStore-method-getRemovedRecords" rel="Ext.data.AbstractStore-method-getRemovedRecords" class="docClass">getRemovedRecords</a> for that). Returns all Model instances that are either currently a phantom (e.g. have no id), or have an ID but have not yet been saved on this Store (this happens when adding a non-phantom record from another Store into this one) Returns the proxy currently attached to this proxy instance Returns any records that have been removed from the store but not yet destroyed on the proxy. Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization. Returns true if the Store is currently performing a load operation Loads the Store using its configured <a href="#!/api/Ext.data.AbstractStore-cfg-proxy" rel="Ext.data.AbstractStore-cfg-proxy" class="docClass">proxy</a>. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes all records from the store. This method does a "fast remove", individual remove events are not called. The <a href="#!/api/Ext.data.AbstractStore-event-clear" rel="Ext.data.AbstractStore-event-clear" class="docClass">clear</a> event is fired upon completion. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes automatically syncing the Store with its Proxy. Only applicable if <a href="#!/api/Ext.data.AbstractStore-cfg-autoSync" rel="Ext.data.AbstractStore-cfg-autoSync" class="docClass">autoSync</a> is <code>true</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Saves all pending changes via the configured <a href="#!/api/Ext.data.AbstractStore-cfg-proxy" rel="Ext.data.AbstractStore-cfg-proxy" class="docClass">proxy</a>. Use <a href="#!/api/Ext.data.AbstractStore-method-sync" rel="Ext.data.AbstractStore-method-sync" class="docClass">sync</a> instead. Sets the Store's Proxy by string, config object or Proxy instance Sorts the data in the Store by one or more of its properties. Example usage: <pre><code>//sort by a single field myStore.sort('myField', 'DESC'); //sorting by multiple fields myStore.sort([ { property : 'age', direction: 'ASC' }, { property : 'name', direction: 'DESC' } ]); </code></pre> Internally, Store converts the passed arguments into an array of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> instances, and delegates the actual sorting to its internal <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>. When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code: <pre><code>store.sort('myField'); store.sort('myField'); </code></pre> Is equivalent to this code, because Store handles the toggling automatically: <pre><code>store.sort('myField', 'ASC'); store.sort('myField', 'DESC'); </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends automatically syncing the Store with its Proxy. Only applicable if <a href="#!/api/Ext.data.AbstractStore-cfg-autoSync" rel="Ext.data.AbstractStore-cfg-autoSync" class="docClass">autoSync</a> is <code>true</code> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Synchronizes the store with its <a href="#!/api/Ext.data.AbstractStore-cfg-proxy" rel="Ext.data.AbstractStore-cfg-proxy" class="docClass">proxy</a>. This asks the proxy to batch together any new, updated and deleted records in the store, updating the store's internal representation of the records as each operation completes. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Creates the store. Config object

The name of the model is on the other end of the association (e.g. if a User model hasMany Orders, this is 'Order') The name of the model that 'owns' the association Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Get a specialized reader for reading associated data Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Creates the Association object. Config object.

The index of the current operation being executed. Read only Ordered array of operations that raised an exception during the most recent batch execution and did not successfully complete True if this batch has encountered an exception. This is cleared at the start of each operation. Read only True if this batch has been executed completely. Read only True if the batch is currently running. Read only Ordered array of operations that will be executed by this batch Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The total number of operations in this batch. Read only Adds a new operation to this batch at the end of the <a href="#!/api/Ext.data.Batch-property-operations" rel="Ext.data.Batch-property-operations" class="docClass">operations</a> array Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Pauses execution of the batch, but does not cancel the current operation Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Kicks off execution of the batch, continuing from the current operation. This is intended for restarting a <a href="#!/api/Ext.data.Batch-method-pause" rel="Ext.data.Batch-method-pause" class="docClass">paused</a> batch after an exception, and the operation that raised the exception will now be retried. The batch will then continue with its normal processing until all operations are complete or another exception is encountered. Note that if the batch is already running any call to retry will be ignored. Executes an operation by its numeric index in the <a href="#!/api/Ext.data.Batch-property-operations" rel="Ext.data.Batch-property-operations" class="docClass">operations</a> array Kicks off execution of the batch, continuing from the next operation if the previous operation encountered an exception, or if execution was paused. Use this method to start the batch for the first time or to restart a paused batch by skipping the current unsuccessful operation. To retry processing the current operation before continuing to the rest of the batch (e.g. because you explicitly handled the operation's exception), call <a href="#!/api/Ext.data.Batch-method-retry" rel="Ext.data.Batch-method-retry" class="docClass">retry</a> instead. Note that if the batch is already running any call to start will be ignored. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Creates the store. Config object

Sets the updating behavior based on batch synchronization. 'operation' (the default) will update the Store's internal representation of the data after each operation of the batch has completed, 'complete' will wait until the entire batch has been completed before updating the Store's data. 'complete' is a good choice for local storage proxies, 'operation' is better for remote proxies, where there is a comparatively high latency. The page that the Store has most recently loaded (see <a href="#!/api/Ext.data.Store-method-loadPage" rel="Ext.data.Store-method-loadPage" class="docClass">loadPage</a>) The MixedCollection that holds this store's local cache of records The string type of the Proxy to create if none is specified. This defaults to creating a <a href="#!/api/Ext.data.proxy.Memory" rel="Ext.data.proxy.Memory" class="docClass">memory proxy</a>. The default sort direction to use if one is not specified. If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired. Defaults to true, ignored if <a href="#!/api/Ext.data.Store-cfg-remoteFilter" rel="Ext.data.Store-cfg-remoteFilter" class="docClass">remoteFilter</a> is true The collection of <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Filters</a> currently applied to this Store The collection of <a href="#!/api/Ext.util.Grouper" rel="Ext.util.Grouper" class="docClass">Groupers</a> currently applied to this Store True if the Store has already been destroyed. If this is true, the reference to Store should be deleted as it will not function correctly any more. Flag denoting that this object is sortable. Always true. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> A pristine (unfiltered) collection of the records in this store. This is used to reinstate records when a filter is removed or changed If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired. Defaults to true, igored if <a href="#!/api/Ext.data.Store-cfg-remoteSort" rel="Ext.data.Store-cfg-remoteSort" class="docClass">remoteSort</a> is true The property in each item that contains the data to sort. The collection of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Sorters</a> currently applied to this Store Adds Model instance to the Store. This method accepts either: <ul> <li>An array of Model instances or Model configuration objects.</li> <li>Any number of Model instance or Model configuration object arguments.</li> </ul> The new Model instances will be added at the end of the existing collection. Sample usage: <pre><code>myStore.add({some: 'data'}, {some: 'other data'}); </code></pre> Note that if this Store is sorted, the new Model instances will be inserted at the correct point in the Store to maintain the sort order. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. (Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information. Runs the aggregate function for all the records in the store. Gets the average value in the store. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Revert to a view of the Record cache with no filtering applied. Clear any groupers in the store Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Collects unique values for a particular dataIndex from this store. Commit all Records with <a href="#!/api/Ext.data.Store-method-getModifiedRecords" rel="Ext.data.Store-method-getModifiedRecords" class="docClass">outstanding changes</a>. To handle updates for changes, subscribe to the Store's <a href="#!/api/Ext.data.Store-event-update" rel="Ext.data.Store-event-update" class="docClass">update event</a>, and perform updating when the third parameter is Ext.data.Record.COMMIT. Gets the count of items in the store. Calls the specified function for each of the <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">Records</a> in the cache. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Filters the loaded set of records by a given set of filters. Filtering by single field: <pre><code>store.filter("email", /\.com$/); </code></pre> Using multiple filters: <pre><code>store.filter([ {property: "email", value: /\.com$/}, {filterFn: function(item) { return item.get("age") > 10; }} ]); </code></pre> Using <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a> instances instead of config objects (note that we need to specify the <a href="#!/api/Ext.util.Filter-cfg-root" rel="Ext.util.Filter-cfg-root" class="docClass">root</a> config option in this case): <pre><code>store.filter([ <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a>', {property: "email", value: /\.com$/, root: 'data'}), <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a>', {filterFn: function(item) { return item.get("age") > 10; }, root: 'data'}) ]); </code></pre> Filter by a function. The specified function will be called for each Record in this Store. If the function returns <tt>true</tt> the Record is included, otherwise it is filtered out. Finds the index of the first matching Record in this store by a specific field value. Find the index of the first matching Record in this Store by a function. If the function returns <tt>true</tt> it is considered a match. Finds the index of the first matching Record in this store by a specific field value. Finds the first matching Record in this store by a specific field value. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Convenience function for getting the first model instance in the store Returns a comparator function which compares two items and returns -1, 0, or 1 depending on the currently defined set of <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a>. If there are no <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a> defined, it returns a function which returns <code>0</code> meaning that no sorting will occur. Get the Record at the specified index. Get the Record with the specified id. Gets the number of cached records. If using paging, this may not be the total size of the dataset. If the data object used by the Reader contains the dataset size, then the <a href="#!/api/Ext.data.Store-method-getTotalCount" rel="Ext.data.Store-method-getTotalCount" class="docClass">getTotalCount</a> function returns the dataset size. Note: see the Important note in <a href="#!/api/Ext.data.Store-method-load" rel="Ext.data.Store-method-load" class="docClass">load</a>. Returns the string to group on for a given model instance. The default implementation of this method returns the model's <a href="#!/api/Ext.data.Store-cfg-groupField" rel="Ext.data.Store-cfg-groupField" class="docClass">groupField</a>, but this can be overridden to group by an arbitrary string. For example, to group by the first letter of a model's 'name' field, use the following code: <pre><code> <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>', { groupDir: 'ASC', getGroupString: function(instance) { return instance.get('name')[0]; } }); </code></pre> Returns an array containing the result of applying grouping to the records in this store. See <a href="#!/api/Ext.data.Store-cfg-groupField" rel="Ext.data.Store-cfg-groupField" class="docClass">groupField</a>, <a href="#!/api/Ext.data.Store-cfg-groupDir" rel="Ext.data.Store-cfg-groupDir" class="docClass">groupDir</a> and <a href="#!/api/Ext.data.Store-method-getGroupString" rel="Ext.data.Store-method-getGroupString" class="docClass">getGroupString</a>. Example for a store containing records with a color field: <pre><code> var myStore = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>', { groupField: 'color', groupDir : 'DESC' }); myStore.getGroups(); //returns: [ { name: 'yellow', children: [ //all records where the color field is 'yellow' ] }, { name: 'red', children: [ //all records where the color field is 'red' ] } ] </code></pre> Gets all <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">records</a> added or updated since the last commit. Note that the order of records returned is not deterministic and does not indicate the order in which records were modified. Note also that removed records are not included (use <a href="#!/api/Ext.data.AbstractStore-method-getRemovedRecords" rel="Ext.data.AbstractStore-method-getRemovedRecords" class="docClass">getRemovedRecords</a> for that). Returns all Model instances that are either currently a phantom (e.g. have no id), or have an ID but have not yet been saved on this Store (this happens when adding a non-phantom record from another Store into this one) Determines the page from a record index Returns the proxy currently attached to this proxy instance Returns a range of Records between specified indices. Returns any records that have been removed from the store but not yet destroyed on the proxy. Returns the total number of <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">Model</a> instances that the <a href="#!/api/Ext.data.proxy.Proxy" rel="Ext.data.proxy.Proxy" class="docClass">Proxy</a> indicates exist. This will usually differ from <a href="#!/api/Ext.data.Store-method-getCount" rel="Ext.data.Store-method-getCount" class="docClass">getCount</a> when using paging - getCount returns the number of records loaded into the Store at the moment, getTotalCount returns the number of records that could be loaded into the Store if the Store contained all data Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy Group data in the store Guarantee a specific range, this will load the store with a range (that must be the pageSize or smaller) and take care of any loading that may be necessary. Checks to see if this object has any listeners for a specified event Returns the number of pending requests out. Get the index within the cache of the passed Record. Get the index within the cache of the Record with the passed id. Get the index within the entire dataset. From 0 to the totalCount. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization. Inserts Model instances into the Store at the given index and fires the <a href="#!/api/Ext.data.Store-event-add" rel="Ext.data.Store-event-add" class="docClass">add</a> event. See also <code><a href="#!/api/Ext.data.Store-method-add" rel="Ext.data.Store-method-add" class="docClass">add</a></code>. Returns true if this store is currently filtered Checks if the store is currently grouped Returns true if the Store is currently performing a load operation Convenience function for getting the last model instance in the store Loads data into the Store via the configured <a href="#!/api/Ext.data.Store-cfg-proxy" rel="Ext.data.Store-cfg-proxy" class="docClass">proxy</a>. This uses the Proxy to make an asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved instances into the Store and calling an optional callback if required. Example usage: <pre><code>store.load({ scope: this, callback: function(records, operation, success) { // the <a href="#!/api/Ext.data.Operation" rel="Ext.data.Operation" class="docClass">operation</a> object // contains all of the details of the load operation console.log(records); } }); </code></pre> If the callback scope does not need to be set, a function can simply be passed: <pre><code>store.load(function(records, operation, success) { console.log('loaded records'); }); </code></pre> Loads an array of data straight into the Store. Using this method is great if the data is in the correct format already (e.g. it doesn't need to be processed by a reader). If your data requires processing to decode the data structure, use a <a href="#!/api/Ext.data.proxy.Memory" rel="Ext.data.proxy.Memory" class="docClass">MemoryProxy</a> instead. Loads a given 'page' of data by setting the start and limit values appropriately. Internally this just causes a normal load operation, passing in calculated 'start' and 'limit' params Loads data via the bound Proxy's reader Use this method if you are attempting to load data and want to utilize the configured data reader. Loads an array of <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">model</a> instances into the store, fires the datachanged event. This should only usually be called internally when loading from the <a href="#!/api/Ext.data.proxy.Proxy" rel="Ext.data.proxy.Proxy" class="docClass">Proxy</a>, when adding records manually use <a href="#!/api/Ext.data.Store-method-add" rel="Ext.data.Store-method-add" class="docClass">add</a> instead Gets the maximum value in the store. Gets the minimum value in the store. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Loads the next 'page' in the current data set Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Prefetches data into the store using its configured <a href="#!/api/Ext.data.Store-cfg-proxy" rel="Ext.data.Store-cfg-proxy" class="docClass">proxy</a>. Prefetches a page of data. Loads the previous 'page' in the current data set Purge the least recently used records in the prefetch if the purgeCount has been exceeded. Query the cached records in this Store using a filtering function. The specified function will be called with each record in this Store. If the function returns <tt>true</tt> the record is included in the results. <a href="#!/api/Ext.data.Model-method-reject" rel="Ext.data.Model-method-reject" class="docClass">Reject</a> outstanding changes on all <a href="#!/api/Ext.data.Store-method-getModifiedRecords" rel="Ext.data.Store-method-getModifiedRecords" class="docClass">modified records</a> and re-insert any records that were removed locally. Any phantom records will be removed. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes the given record from the Store, firing the 'remove' event for each instance that is removed, plus a single 'datachanged' event after removal. Remove all items from the store. Removes the model instance at the given index Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes automatically syncing the Store with its Proxy. Only applicable if <a href="#!/api/Ext.data.AbstractStore-cfg-autoSync" rel="Ext.data.AbstractStore-cfg-autoSync" class="docClass">autoSync</a> is <code>true</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Saves all pending changes via the configured <a href="#!/api/Ext.data.AbstractStore-cfg-proxy" rel="Ext.data.AbstractStore-cfg-proxy" class="docClass">proxy</a>. Use <a href="#!/api/Ext.data.AbstractStore-method-sync" rel="Ext.data.AbstractStore-method-sync" class="docClass">sync</a> instead. Sets the Store's Proxy by string, config object or Proxy instance Sorts the data in the Store by one or more of its properties. Example usage: <pre><code>//sort by a single field myStore.sort('myField', 'DESC'); //sorting by multiple fields myStore.sort([ { property : 'age', direction: 'ASC' }, { property : 'name', direction: 'DESC' } ]); </code></pre> Internally, Store converts the passed arguments into an array of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> instances, and delegates the actual sorting to its internal <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>. When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code: <pre><code>store.sort('myField'); store.sort('myField'); </code></pre> Is equivalent to this code, because Store handles the toggling automatically: <pre><code>store.sort('myField', 'ASC'); store.sort('myField', 'DESC'); </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Sums the value of <tt>property</tt> for each <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">record</a> between <tt>start</tt> and <tt>end</tt> and returns the result. Suspends automatically syncing the Store with its Proxy. Only applicable if <a href="#!/api/Ext.data.AbstractStore-cfg-autoSync" rel="Ext.data.AbstractStore-cfg-autoSync" class="docClass">autoSync</a> is <code>true</code> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Synchronizes the store with its <a href="#!/api/Ext.data.AbstractStore-cfg-proxy" rel="Ext.data.AbstractStore-cfg-proxy" class="docClass">proxy</a>. This asks the proxy to batch together any new, updated and deleted records in the store, updating the store's internal representation of the records as each operation completes. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Aborts an active request. Aborts all active requests Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Determines whether this object has a request outstanding. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Checks if the response status was successful Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Sends an HTTP request to a remote server. Important: Ajax server requests are asynchronous, and this call will return before the response has been received. Process any returned data in a callback function. <pre><code><a href="#!/api/Ext.Ajax-method-request" rel="Ext.Ajax-method-request" class="docClass">Ext.Ajax.request</a>({ url: 'ajax_demo/sample.json', success: function(response, opts) { var obj = <a href="#!/api/Ext-method-decode" rel="Ext-method-decode" class="docClass">Ext.decode</a>(response.responseText); console.dir(obj); }, failure: function(response, opts) { console.log('server-side failure with status code ' + response.status); } }); </code></pre> To execute a callback function in the correct scope, use the <code>scope</code> option. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Sets various options such as the url, params for the request Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Uploads a form using a hidden iframe. Creates the store. Config object

Sets the updating behavior based on batch synchronization. 'operation' (the default) will update the Store's internal representation of the data after each operation of the batch has completed, 'complete' will wait until the entire batch has been completed before updating the Store's data. 'complete' is a good choice for local storage proxies, 'operation' is better for remote proxies, where there is a comparatively high latency. The page that the Store has most recently loaded (see <a href="#!/api/Ext.data.Store-method-loadPage" rel="Ext.data.Store-method-loadPage" class="docClass">loadPage</a>) The MixedCollection that holds this store's local cache of records The string type of the Proxy to create if none is specified. This defaults to creating a <a href="#!/api/Ext.data.proxy.Memory" rel="Ext.data.proxy.Memory" class="docClass">memory proxy</a>. The default sort direction to use if one is not specified. If true, any filters attached to this Store will be run after loading data, before the datachanged event is fired. Defaults to true, ignored if <a href="#!/api/Ext.data.Store-cfg-remoteFilter" rel="Ext.data.Store-cfg-remoteFilter" class="docClass">remoteFilter</a> is true The collection of <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Filters</a> currently applied to this Store The collection of <a href="#!/api/Ext.util.Grouper" rel="Ext.util.Grouper" class="docClass">Groupers</a> currently applied to this Store True if the Store has already been destroyed. If this is true, the reference to Store should be deleted as it will not function correctly any more. Flag denoting that this object is sortable. Always true. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> A pristine (unfiltered) collection of the records in this store. This is used to reinstate records when a filter is removed or changed If true, any sorters attached to this Store will be run after loading data, before the datachanged event is fired. Defaults to true, igored if <a href="#!/api/Ext.data.Store-cfg-remoteSort" rel="Ext.data.Store-cfg-remoteSort" class="docClass">remoteSort</a> is true The property in each item that contains the data to sort. The collection of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Sorters</a> currently applied to this Store Adds Model instance to the Store. This method accepts either: <ul> <li>An array of Model instances or Model configuration objects.</li> <li>Any number of Model instance or Model configuration object arguments.</li> </ul> The new Model instances will be added at the end of the existing collection. Sample usage: <pre><code>myStore.add({some: 'data'}, {some: 'other data'}); </code></pre> Note that if this Store is sorted, the new Model instances will be inserted at the correct point in the Store to maintain the sort order. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. (Local sort only) Inserts the passed Record into the Store at the index where it should go based on the current sort information. Runs the aggregate function for all the records in the store. Gets the average value in the store. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Revert to a view of the Record cache with no filtering applied. Clear any groupers in the store Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Collects unique values for a particular dataIndex from this store. Commit all Records with <a href="#!/api/Ext.data.Store-method-getModifiedRecords" rel="Ext.data.Store-method-getModifiedRecords" class="docClass">outstanding changes</a>. To handle updates for changes, subscribe to the Store's <a href="#!/api/Ext.data.Store-event-update" rel="Ext.data.Store-event-update" class="docClass">update event</a>, and perform updating when the third parameter is Ext.data.Record.COMMIT. Gets the count of items in the store. Calls the specified function for each of the <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">Records</a> in the cache. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Filters the loaded set of records by a given set of filters. Filtering by single field: <pre><code>store.filter("email", /\.com$/); </code></pre> Using multiple filters: <pre><code>store.filter([ {property: "email", value: /\.com$/}, {filterFn: function(item) { return item.get("age") > 10; }} ]); </code></pre> Using <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a> instances instead of config objects (note that we need to specify the <a href="#!/api/Ext.util.Filter-cfg-root" rel="Ext.util.Filter-cfg-root" class="docClass">root</a> config option in this case): <pre><code>store.filter([ <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a>', {property: "email", value: /\.com$/, root: 'data'}), <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a>', {filterFn: function(item) { return item.get("age") > 10; }, root: 'data'}) ]); </code></pre> Filter by a function. The specified function will be called for each Record in this Store. If the function returns <tt>true</tt> the Record is included, otherwise it is filtered out. Finds the index of the first matching Record in this store by a specific field value. Find the index of the first matching Record in this Store by a function. If the function returns <tt>true</tt> it is considered a match. Finds the index of the first matching Record in this store by a specific field value. Finds the first matching Record in this store by a specific field value. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Convenience function for getting the first model instance in the store Returns a comparator function which compares two items and returns -1, 0, or 1 depending on the currently defined set of <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a>. If there are no <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a> defined, it returns a function which returns <code>0</code> meaning that no sorting will occur. Get the Record at the specified index. Get the Record with the specified id. Gets the number of cached records. If using paging, this may not be the total size of the dataset. If the data object used by the Reader contains the dataset size, then the <a href="#!/api/Ext.data.Store-method-getTotalCount" rel="Ext.data.Store-method-getTotalCount" class="docClass">getTotalCount</a> function returns the dataset size. Note: see the Important note in <a href="#!/api/Ext.data.Store-method-load" rel="Ext.data.Store-method-load" class="docClass">load</a>. Returns the string to group on for a given model instance. The default implementation of this method returns the model's <a href="#!/api/Ext.data.Store-cfg-groupField" rel="Ext.data.Store-cfg-groupField" class="docClass">groupField</a>, but this can be overridden to group by an arbitrary string. For example, to group by the first letter of a model's 'name' field, use the following code: <pre><code> <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>', { groupDir: 'ASC', getGroupString: function(instance) { return instance.get('name')[0]; } }); </code></pre> Returns an array containing the result of applying grouping to the records in this store. See <a href="#!/api/Ext.data.Store-cfg-groupField" rel="Ext.data.Store-cfg-groupField" class="docClass">groupField</a>, <a href="#!/api/Ext.data.Store-cfg-groupDir" rel="Ext.data.Store-cfg-groupDir" class="docClass">groupDir</a> and <a href="#!/api/Ext.data.Store-method-getGroupString" rel="Ext.data.Store-method-getGroupString" class="docClass">getGroupString</a>. Example for a store containing records with a color field: <pre><code> var myStore = <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>', { groupField: 'color', groupDir : 'DESC' }); myStore.getGroups(); //returns: [ { name: 'yellow', children: [ //all records where the color field is 'yellow' ] }, { name: 'red', children: [ //all records where the color field is 'red' ] } ] </code></pre> Gets all <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">records</a> added or updated since the last commit. Note that the order of records returned is not deterministic and does not indicate the order in which records were modified. Note also that removed records are not included (use <a href="#!/api/Ext.data.AbstractStore-method-getRemovedRecords" rel="Ext.data.AbstractStore-method-getRemovedRecords" class="docClass">getRemovedRecords</a> for that). Returns all Model instances that are either currently a phantom (e.g. have no id), or have an ID but have not yet been saved on this Store (this happens when adding a non-phantom record from another Store into this one) Determines the page from a record index Returns the proxy currently attached to this proxy instance Returns a range of Records between specified indices. Returns any records that have been removed from the store but not yet destroyed on the proxy. Returns the total number of <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">Model</a> instances that the <a href="#!/api/Ext.data.proxy.Proxy" rel="Ext.data.proxy.Proxy" class="docClass">Proxy</a> indicates exist. This will usually differ from <a href="#!/api/Ext.data.Store-method-getCount" rel="Ext.data.Store-method-getCount" class="docClass">getCount</a> when using paging - getCount returns the number of records loaded into the Store at the moment, getTotalCount returns the number of records that could be loaded into the Store if the Store contained all data Returns all Model instances that have been updated in the Store but not yet synchronized with the Proxy Group data in the store Guarantee a specific range, this will load the store with a range (that must be the pageSize or smaller) and take care of any loading that may be necessary. Checks to see if this object has any listeners for a specified event Returns the number of pending requests out. Get the index within the cache of the passed Record. Get the index within the cache of the Record with the passed id. Get the index within the entire dataset. From 0 to the totalCount. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization. Inserts Model instances into the Store at the given index and fires the <a href="#!/api/Ext.data.Store-event-add" rel="Ext.data.Store-event-add" class="docClass">add</a> event. See also <code><a href="#!/api/Ext.data.Store-method-add" rel="Ext.data.Store-method-add" class="docClass">add</a></code>. Returns true if this store is currently filtered Checks if the store is currently grouped Returns true if the Store is currently performing a load operation Convenience function for getting the last model instance in the store Loads data into the Store via the configured <a href="#!/api/Ext.data.Store-cfg-proxy" rel="Ext.data.Store-cfg-proxy" class="docClass">proxy</a>. This uses the Proxy to make an asynchronous call to whatever storage backend the Proxy uses, automatically adding the retrieved instances into the Store and calling an optional callback if required. Example usage: <pre><code>store.load({ scope: this, callback: function(records, operation, success) { // the <a href="#!/api/Ext.data.Operation" rel="Ext.data.Operation" class="docClass">operation</a> object // contains all of the details of the load operation console.log(records); } }); </code></pre> If the callback scope does not need to be set, a function can simply be passed: <pre><code>store.load(function(records, operation, success) { console.log('loaded records'); }); </code></pre> Loads an array of data straight into the Store. Using this method is great if the data is in the correct format already (e.g. it doesn't need to be processed by a reader). If your data requires processing to decode the data structure, use a <a href="#!/api/Ext.data.proxy.Memory" rel="Ext.data.proxy.Memory" class="docClass">MemoryProxy</a> instead. Loads a given 'page' of data by setting the start and limit values appropriately. Internally this just causes a normal load operation, passing in calculated 'start' and 'limit' params Loads data via the bound Proxy's reader Use this method if you are attempting to load data and want to utilize the configured data reader. Loads an array of <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">model</a> instances into the store, fires the datachanged event. This should only usually be called internally when loading from the <a href="#!/api/Ext.data.proxy.Proxy" rel="Ext.data.proxy.Proxy" class="docClass">Proxy</a>, when adding records manually use <a href="#!/api/Ext.data.Store-method-add" rel="Ext.data.Store-method-add" class="docClass">add</a> instead Gets the maximum value in the store. Gets the minimum value in the store. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Loads the next 'page' in the current data set Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Prefetches data into the store using its configured <a href="#!/api/Ext.data.Store-cfg-proxy" rel="Ext.data.Store-cfg-proxy" class="docClass">proxy</a>. Prefetches a page of data. Loads the previous 'page' in the current data set Purge the least recently used records in the prefetch if the purgeCount has been exceeded. Query the cached records in this Store using a filtering function. The specified function will be called with each record in this Store. If the function returns <tt>true</tt> the record is included in the results. <a href="#!/api/Ext.data.Model-method-reject" rel="Ext.data.Model-method-reject" class="docClass">Reject</a> outstanding changes on all <a href="#!/api/Ext.data.Store-method-getModifiedRecords" rel="Ext.data.Store-method-getModifiedRecords" class="docClass">modified records</a> and re-insert any records that were removed locally. Any phantom records will be removed. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes the given record from the Store, firing the 'remove' event for each instance that is removed, plus a single 'datachanged' event after removal. Remove all items from the store. Removes the model instance at the given index Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes automatically syncing the Store with its Proxy. Only applicable if <a href="#!/api/Ext.data.AbstractStore-cfg-autoSync" rel="Ext.data.AbstractStore-cfg-autoSync" class="docClass">autoSync</a> is <code>true</code> Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Saves all pending changes via the configured <a href="#!/api/Ext.data.AbstractStore-cfg-proxy" rel="Ext.data.AbstractStore-cfg-proxy" class="docClass">proxy</a>. Use <a href="#!/api/Ext.data.AbstractStore-method-sync" rel="Ext.data.AbstractStore-method-sync" class="docClass">sync</a> instead. Sets the Store's Proxy by string, config object or Proxy instance Sorts the data in the Store by one or more of its properties. Example usage: <pre><code>//sort by a single field myStore.sort('myField', 'DESC'); //sorting by multiple fields myStore.sort([ { property : 'age', direction: 'ASC' }, { property : 'name', direction: 'DESC' } ]); </code></pre> Internally, Store converts the passed arguments into an array of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> instances, and delegates the actual sorting to its internal <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>. When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code: <pre><code>store.sort('myField'); store.sort('myField'); </code></pre> Is equivalent to this code, because Store handles the toggling automatically: <pre><code>store.sort('myField', 'ASC'); store.sort('myField', 'DESC'); </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Sums the value of <tt>property</tt> for each <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">record</a> between <tt>start</tt> and <tt>end</tt> and returns the result. Suspends automatically syncing the Store with its Proxy. Only applicable if <a href="#!/api/Ext.data.AbstractStore-cfg-autoSync" rel="Ext.data.AbstractStore-cfg-autoSync" class="docClass">autoSync</a> is <code>true</code> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Synchronizes the store with its <a href="#!/api/Ext.data.AbstractStore-cfg-proxy" rel="Ext.data.AbstractStore-cfg-proxy" class="docClass">proxy</a>. This asks the proxy to batch together any new, updated and deleted records in the store, updating the store's internal representation of the records as each operation completes. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Creates new MixedCollection. Specify <tt>true</tt> if the <a href="#!/api/Ext.util.MixedCollection-method-addAll" rel="Ext.util.MixedCollection-method-addAll" class="docClass">addAll</a> function should add function references to the collection. Defaults to <tt>false</tt>. A function that can accept an item of the type(s) stored in this MixedCollection and return the key value for that item. This is used when available to look up the key on items that were passed without an explicit key parameter to a MixedCollection method. Passing this parameter is equivalent to providing an implementation for the <a href="#!/api/Ext.util.MixedCollection-method-getKey" rel="Ext.util.MixedCollection-method-getKey" class="docClass">getKey</a> method.

The default sort direction to use if one is not specified. Flag denoting that this object is sortable. Always true. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> The property in each item that contains the data to sort. The collection of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Sorters</a> currently applied to this Store Adds an item to the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-add" rel="Ext.util.AbstractMixedCollection-event-add" class="docClass">add</a> event when complete. Adds all elements of an Array or an Object to the collection. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all items from the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-clear" rel="Ext.util.AbstractMixedCollection-event-clear" class="docClass">clear</a> event when complete. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Creates a shallow copy of this collection Collects unique values of a particular property in this MixedCollection Returns true if the collection contains the passed Object as an item. Returns true if the collection contains the passed Object as a key. Executes the specified function once for every item in the collection, passing the following arguments: <div class="mdetail-params"><ul> <li>item : MixedThe collection item</li> <li>index : NumberThe item's index</li> <li>length : NumberThe total number of items in the collection</li> </ul></div> The function should return a boolean value. Returning false from the function will stop the iteration. Executes the specified function once for every key in the collection, passing each key, and its associated item as the first two parameters. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Filters the objects in this collection by a set of <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Filter</a>s, or by a single property/value pair with optional parameters for substring matching and case sensitivity. See <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Filter</a> for an example of using Filter objects (preferred). Alternatively, MixedCollection can be easily filtered by property like this: <pre><code>//create a simple store with a few people defined var people = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(); people.addAll([ {id: 1, age: 25, name: 'Ed'}, {id: 2, age: 24, name: 'Tommy'}, {id: 3, age: 24, name: 'Arne'}, {id: 4, age: 26, name: 'Aaron'} ]); //a new MixedCollection containing only the items where age == 24 var middleAged = people.filter('age', 24); </code></pre> Filter by a function. Returns a new collection that has been filtered. The passed function will be called with each object in the collection. If the function returns true, the value is included otherwise it is filtered. Returns the first item in the collection which elicits a true return value from the passed selection function. Finds the index of the first matching object in this collection by a specific property/value. Find the index of the first matching object in this collection by a function. If the function returns true it is considered a match. Calculates the insertion index of the new item based upon the comparison function passed, or the current sort order. Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns the first item in the collection. Returns a comparator function which compares two items and returns -1, 0, or 1 depending on the currently defined set of <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a>. If there are no <a href="#!/api/Ext.util.Sortable-property-sorters" rel="Ext.util.Sortable-property-sorters" class="docClass">sorters</a> defined, it returns a function which returns <code>0</code> meaning that no sorting will occur. Returns the item associated with the passed key OR index. Key has priority over index. This is the equivalent of calling <a href="#!/api/Ext.util.AbstractMixedCollection-method-getByKey" rel="Ext.util.AbstractMixedCollection-method-getByKey" class="docClass">getByKey</a> first, then if nothing matched calling <a href="#!/api/Ext.util.AbstractMixedCollection-method-getAt" rel="Ext.util.AbstractMixedCollection-method-getAt" class="docClass">getAt</a>. Returns the item at the specified index. Returns all of the errors for the given field Returns the item associated with the passed key. Returns the number of items in the collection. MixedCollection has a generic way to fetch keys if you implement getKey. The default implementation simply returns <code>item.id</code> but you can provide your own implementation to return a different value as in the following examples: <pre><code>// normal way var mc = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(); mc.add(someEl.dom.id, someEl); mc.add(otherEl.dom.id, otherEl); //and so on // using getKey var mc = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(); mc.getKey = function(el){ return el.dom.id; }; mc.add(someEl); mc.add(otherEl); // or via the constructor var mc = new <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>(false, function(el){ return el.dom.id; }); mc.add(someEl); mc.add(otherEl); </code></pre> Returns a range of items in this collection Checks to see if this object has any listeners for a specified event Returns index within the collection of the passed Object. Returns index within the collection of the passed key. Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Performs initialization of this mixin. Component classes using this mixin should call this method during their own initialization. Inserts an item at the specified index in the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-add" rel="Ext.util.AbstractMixedCollection-event-add" class="docClass">add</a> event when complete. Returns true if there are no errors in the collection Returns the last item in the collection. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Remove an item from the collection. Remove all items in the passed array from the collection. Remove an item from a specified index in the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-remove" rel="Ext.util.AbstractMixedCollection-event-remove" class="docClass">remove</a> event when complete. Removed an item associated with the passed key fom the collection. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Reorders each of the items based on a mapping from old index to new index. Internally this just translates into a sort. The 'sort' event is fired whenever reordering has occured. Replaces an item in the collection. Fires the <a href="#!/api/Ext.util.AbstractMixedCollection-event-replace" rel="Ext.util.AbstractMixedCollection-event-replace" class="docClass">replace</a> event when complete. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Sorts the data in the Store by one or more of its properties. Example usage: <pre><code>//sort by a single field myStore.sort('myField', 'DESC'); //sorting by multiple fields myStore.sort([ { property : 'age', direction: 'ASC' }, { property : 'name', direction: 'DESC' } ]); </code></pre> Internally, Store converts the passed arguments into an array of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> instances, and delegates the actual sorting to its internal <a href="#!/api/Ext.util.MixedCollection" rel="Ext.util.MixedCollection" class="docClass">Ext.util.MixedCollection</a>. When passing a single string argument to sort, Store maintains a ASC/DESC toggler per field, so this code: <pre><code>store.sort('myField'); store.sort('myField'); </code></pre> Is equivalent to this code, because Store handles the toggling automatically: <pre><code>store.sort('myField', 'ASC'); store.sort('myField', 'DESC'); </code></pre> Sorts the collection by a single sorter function Sorts this collection by keys. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Collects all of the values of the given property and returns their sum Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Initializes a new instance. Configuration object to be applied to the new instance.

True if this Record has been modified. Internal flag used to track whether or not the model instance is currently being edited. The fields defined on this model. Key: value pairs of all fields whose values have changed True when the record does not yet exist in a server-side database (see <a href="#!/api/Ext.data.Model-method-setDirty" rel="Ext.data.Model-method-setDirty" class="docClass">setDirty</a>). Any record which has a real database pk set as its id property is NOT a phantom -- it's real. The raw data used to create this model if created via a reader. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> An array of <a href="#!/api/Ext.data.AbstractStore" rel="Ext.data.AbstractStore" class="docClass">Ext.data.AbstractStore</a> objects that this record is bound to. Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Begins an edit. While in edit mode, no events (e.g.. the <code>update</code> event) are relayed to the containing store. When an edit has begun, it must be followed by either <a href="#!/api/Ext.data.Model-method-endEdit" rel="Ext.data.Model-method-endEdit" class="docClass">endEdit</a> or <a href="#!/api/Ext.data.Model-method-cancelEdit" rel="Ext.data.Model-method-cancelEdit" class="docClass">cancelEdit</a>. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Cancels all changes made in the current edit operation. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Usually called by the <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a> which owns the model instance. Commits all changes made to the instance since either creation or the last commit operation. Developers should subscribe to the <a href="#!/api/Ext.data.Store-event-update" rel="Ext.data.Store-event-update" class="docClass">Ext.data.Store.update</a> event to have their code notified of commit operations. Creates a copy (clone) of this Model instance. Destroys the model using the configured proxy. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Ends an edit. If any data was modified, the containing store is notified (ie, the store's <code>update</code> event will fire). Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns the value of the given field Gets all of the data from this Models loaded associations. It does this recursively - for example if we have a User which hasMany Orders, and each Order hasMany OrderItems, it will return an object like this: <pre><code>{ orders: [ { id: 123, status: 'shipped', orderItems: [ ... ] } ] } </code></pre> Gets a hash of only the fields that have been modified since this Model was created or commited. Gets all values for each field in this model and returns an object containing the current data. Returns the unique ID allocated to this model instance as defined by <a href="#!/api/Ext.data.Model-cfg-idProperty" rel="Ext.data.Model-cfg-idProperty" class="docClass">idProperty</a>. Returns the configured Proxy for this Model. Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Returns true if the passed field name has been <code><a href="#!/api/Ext.data.Model-property-modified" rel="Ext.data.Model-property-modified" class="docClass">modified</a></code> since the load or last commit. Checks if the model is valid. See <a href="#!/api/Ext.data.Model-method-validate" rel="Ext.data.Model-method-validate" class="docClass">validate</a>. Tells this model instance that it has been added to a store. Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Usually called by the <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a> to which this model instance has been <a href="#!/api/Ext.data.Model-method-join" rel="Ext.data.Model-method-join" class="docClass">joined</a>. Rejects all changes made to the model instance since either creation, or the last commit operation. Modified fields are reverted to their original values. Developers should subscribe to the <a href="#!/api/Ext.data.Store-event-update" rel="Ext.data.Store-event-update" class="docClass">Ext.data.Store.update</a> event to have their code notified of reject operations. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Saves the model instance using the configured proxy. Sets the given field to the given value, marks the instance as dirty Marks this Record as <code><a href="#!/api/Ext.data.Model-property-dirty" rel="Ext.data.Model-property-dirty" class="docClass">dirty</a></code>. This method is used interally when adding <code><a href="#!/api/Ext.data.Model-property-phantom" rel="Ext.data.Model-property-phantom" class="docClass">phantom</a></code> records to a <a href="#!/api/Ext.data.proxy.Server-cfg-writer" rel="Ext.data.proxy.Server-cfg-writer" class="docClass">writer enabled store</a>. Marking a record <code><a href="#!/api/Ext.data.Model-property-dirty" rel="Ext.data.Model-property-dirty" class="docClass">dirty</a></code> causes the phantom to be returned by <a href="#!/api/Ext.data.Store-method-getUpdatedRecords" rel="Ext.data.Store-method-getUpdatedRecords" class="docClass">Ext.data.Store.getUpdatedRecords</a> where it will have a create action composed for it during <a href="#!/api/Ext.data.Model-method-save" rel="Ext.data.Model-method-save" class="docClass">model save</a> operations. Sets the model instance's id field to the given id. Sets the Proxy to use for this model. Accepts any options that can be accepted by <a href="#!/api/Ext-method-createByAlias" rel="Ext-method-createByAlias" class="docClass">Ext.createByAlias</a>. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Tells this model instance that it has been removed from the store. Validates the current data against all of its configured <a href="#!/api/Ext.data.Model-cfg-validations" rel="Ext.data.Model-cfg-validations" class="docClass">validations</a>. An array of this nodes children. Array will be empty if this node has no chidren. A reference to this node's first child node. <code>null</code> if this node has no children. A reference to this node's last child node. <code>null</code> if this node has no children. A reference to this node's next sibling node. <code>null</code> if this node does not have a next sibling. A reference to this node's parent node. <code>null</code> if this node is the root node. A reference to this node's previous sibling node. <code>null</code> if this node does not have a previous sibling. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Inserts node(s) as the last child node of this node. If the node was previously a child node of another parent node, it will be removed from that node first. Bubbles up the tree from this node, calling the specified function with each node. The arguments to the function will be the args provided or the current node. If the function returns false at any point, the bubble is stopped. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Cascades down the tree from this node, calling the specified function with each node. The arguments to the function will be the args provided or the current node. If the function returns false at any point, the cascade is stopped on that branch. Collapse this node. Collapse all the children of this node. Returns true if this node is an ancestor (at any point) of the passed node. Creates a copy (clone) of this Node. Ensures that the passed object is an instance of a Record with the NodeInterface applied Destroys the node. Interates the child nodes of this node, calling the specified function with each node. The arguments to the function will be the args provided or the current node. If the function returns false at any point, the iteration stops. Expand this node. Expand all the children of this node. Finds the first child that has the attribute with the specified value. Finds the first child by a custom function. The child matches if the function passed returns true. Returns the child node at the specified index. Returns depth of this node (the root node has a depth of 0) Gets the hierarchical path from the root of the current node. Returns true if this node has one or more child nodes, else false. Returns the index of a child node Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Inserts the first node before the second node in this nodes childNodes collection. Insert a node into this node Returns true if the passed node is an ancestor (at any point) of this node. Returns true if this node has one or more child nodes, or if the <tt>expandable</tt> node attribute is explicitly specified as true, otherwise returns false. Returns true if this node is expaned Returns true if this node is the first child of its parent Returns true if this node is the last child of its parent Returns true if this node is a leaf Returns true if this node is loaded Returns true if this node is loading Returns true if this node is the root node Returns true if this node is visible Removes this node from its parent Removes all child nodes from this node. Removes a child node from this node. Replaces one child node in this node with another. Sorts this nodes children using the supplied sort function. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Updates general data of this node like isFirst, isLast, depth. This method is internally called after a node is moved. This shouldn't have to be called by the developer unless they are creating custom Tree plugins. Creates the store. Config object

The RegExp used to categorize actions that require record commits. The RegExp used to categorize actions that skip local record synchronization. This defaults to match 'destroy'. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Checks whether this operation should cause writing to occur. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> This method is called to commit data to this instance's records given the records in the server response. This is followed by calling <a href="#!/api/Ext.data.Model-method-commit" rel="Ext.data.Model-method-commit" class="docClass">Ext.data.Model.commit</a> on all those records (for 'create' and 'update' actions). If this <a href="#!/api/Ext.data.Operation-cfg-action" rel="Ext.data.Operation-cfg-action" class="docClass">action</a> is 'destroy', any server records are ignored and the <a href="#!/api/Ext.data.Model-method-commit" rel="Ext.data.Model-method-commit" class="docClass">Ext.data.Model.commit</a> method is not called. Returns the error string or object that was set using <a href="#!/api/Ext.data.Operation-method-setException" rel="Ext.data.Operation-method-setException" class="docClass">setException</a> Returns the <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">record</a>s associated with this operation. For read operations the records as set by the <a href="#!/api/Ext.data.proxy.Proxy" rel="Ext.data.proxy.Proxy" class="docClass">Proxy</a> will be returned (returns <code>null</code> if the proxy has not yet set the records). For create, update, and destroy operations the operation's initially configured records will be returned, although the proxy may modify these records' data at some point after the operation is initialized. Returns the ResultSet object (if set by the Proxy). This object will contain the <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">model</a> instances as well as meta data such as number of instances fetched, number available etc Returns true if this Operation encountered an exception (see also <a href="#!/api/Ext.data.Operation-method-getError" rel="Ext.data.Operation-method-getError" class="docClass">getError</a>) Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Returns true if the Operation has been completed Returns true if the Operation has been started but has not yet completed. Returns true if the Operation has been started. Note that the Operation may have started AND completed, see <a href="#!/api/Ext.data.Operation-method-isRunning" rel="Ext.data.Operation-method-isRunning" class="docClass">isRunning</a> to test if the Operation is currently running. Marks the Operation as completed. Marks the Operation as having experienced an exception. Can be supplied with an option error message/object. Marks the Operation as started. Marks the Operation as successful. Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Returns true if the Operation has completed and was successful Note that if this HttpProxy is being used by a <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Store</a>, then the Store's call to <a href="#!/api/Ext.data.Store-method-load" rel="Ext.data.Store-method-load" class="docClass">load</a> will override any specified callback and params options. In this case, use the <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Store</a>'s events to modify parameters, or react to loading events. Config object. If an options parameter is passed, the singleton <a href="#!/api/Ext.Ajax" rel="Ext.Ajax" class="docClass">Ext.Ajax</a> object will be used to make the request.

Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to 'GET' for 'read' actions and 'POST' for 'create', 'update' and 'destroy' actions. The <a href="#!/api/Ext.data.proxy.Rest" rel="Ext.data.proxy.Rest" class="docClass">Ext.data.proxy.Rest</a> maps these to the correct RESTful methods. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Optional callback function which can be used to clean up after a request has been completed. Performs a batch of <a href="#!/api/Ext.data.Operation" rel="Ext.data.Operation" class="docClass">Operations</a>, in the order specified by <a href="#!/api/Ext.data.proxy.Proxy-cfg-batchOrder" rel="Ext.data.proxy.Proxy-cfg-batchOrder" class="docClass">batchOrder</a>. Used internally by <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>'s <a href="#!/api/Ext.data.Store-method-sync" rel="Ext.data.Store-method-sync" class="docClass">sync</a> method. Example usage: <pre><code>myProxy.batch({ create : [myModel1, myModel2], update : [myModel3], destroy: [myModel4, myModel5] }); </code></pre> Where the myModel* above are <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">Model</a> instances - in this case 1 and 2 are new instances and have not been saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been saved but should now be destroyed. Note that the previous version of this method took 2 arguments (operations and listeners). While this is still supported for now, the current signature is now a single <code>options</code> argument that can contain both operations and listeners, in addition to other options. The multi-argument signature will likely be deprecated in a future release. Creates and returns an <a href="#!/api/Ext.data.Request" rel="Ext.data.Request" class="docClass">Ext.data.Request</a> object based on the options passed by the <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Store</a> that this Proxy is attached to. Generates a url based on a given <a href="#!/api/Ext.data.Request" rel="Ext.data.Request" class="docClass">Ext.data.Request</a> object. By default, ServerProxy's buildUrl will add the cache-buster param to the end of the url. Subclasses may need to perform additional modifications to the url. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Performs the given create operation. Performs the given destroy operation. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Encodes the array of <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a> objects into a string to be sent in the request url. By default, this simply JSON-encodes the filter data Encodes the array of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> objects into a string to be sent in the request url. By default, this simply JSON-encodes the sorter data Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns the HTTP method name for a given request. By default this returns based on a lookup on <a href="#!/api/Ext.data.proxy.Ajax-property-actionMethods" rel="Ext.data.proxy.Ajax-property-actionMethods" class="docClass">actionMethods</a>. Returns the model attached to this Proxy Returns the reader currently attached to this proxy instance Returns the writer currently attached to this proxy instance Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Performs the given read operation. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Sets a value in the underlying <a href="#!/api/Ext.data.proxy.Server-cfg-extraParams" rel="Ext.data.proxy.Server-cfg-extraParams" class="docClass">extraParams</a>. Sets the model associated with this proxy. This will only usually be called by a Store Sets the Proxy's Reader by string, config object or Reader instance Sets the Proxy's Writer by string, config object or Writer instance Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Performs the given update operation. Creates the Proxy Config object.

Cached map of records already retrieved by this Proxy. Ensures that the same instance is always retrieved. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Performs a batch of <a href="#!/api/Ext.data.Operation" rel="Ext.data.Operation" class="docClass">Operations</a>, in the order specified by <a href="#!/api/Ext.data.proxy.Proxy-cfg-batchOrder" rel="Ext.data.proxy.Proxy-cfg-batchOrder" class="docClass">batchOrder</a>. Used internally by <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>'s <a href="#!/api/Ext.data.Store-method-sync" rel="Ext.data.Store-method-sync" class="docClass">sync</a> method. Example usage: <pre><code>myProxy.batch({ create : [myModel1, myModel2], update : [myModel3], destroy: [myModel4, myModel5] }); </code></pre> Where the myModel* above are <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">Model</a> instances - in this case 1 and 2 are new instances and have not been saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been saved but should now be destroyed. Note that the previous version of this method took 2 arguments (operations and listeners). While this is still supported for now, the current signature is now a single <code>options</code> argument that can contain both operations and listeners, in addition to other options. The multi-argument signature will likely be deprecated in a future release. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Destroys all records stored in the proxy and removes all keys and values used to support the proxy from the storage object. Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Performs the given create operation. Performs the given destroy operation. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns the model attached to this Proxy Returns the reader currently attached to this proxy instance Returns the writer currently attached to this proxy instance Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Performs the given read operation. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Sets the model associated with this proxy. This will only usually be called by a Store Sets the Proxy's Reader by string, config object or Reader instance Saves the given record in the Proxy. Sets the Proxy's Writer by string, config object or Writer instance Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Performs the given update operation. Creates the Proxy Config object.

Mapping of action name to HTTP request method. These default to RESTful conventions for the 'create', 'read', 'update' and 'destroy' actions (which map to 'POST', 'GET', 'PUT' and 'DELETE' respectively). This object should not be changed except globally via <a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a> - the <a href="#!/api/Ext.data.proxy.Rest-method-getMethod" rel="Ext.data.proxy.Rest-method-getMethod" class="docClass">getMethod</a> function can be overridden instead. Get the reference to the current class from which this object was instantiated. Unlike <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a>, <code>this.self</code> is scope-dependent and it's meant to be used for dynamic inheritance. See <a href="#!/api/Ext.Base-method-statics" rel="Ext.Base-method-statics" class="docClass">statics</a> for a detailed comparison <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { alert(this.self.speciesName); / dependentOL on 'this' }, clone: function() { return new this.self(); } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' } }); var cat = new My.Cat(); // alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' </code></pre> Adds the specified events to the list of events which this Observable may fire. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Optional callback function which can be used to clean up after a request has been completed. Performs a batch of <a href="#!/api/Ext.data.Operation" rel="Ext.data.Operation" class="docClass">Operations</a>, in the order specified by <a href="#!/api/Ext.data.proxy.Proxy-cfg-batchOrder" rel="Ext.data.proxy.Proxy-cfg-batchOrder" class="docClass">batchOrder</a>. Used internally by <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Ext.data.Store</a>'s <a href="#!/api/Ext.data.Store-method-sync" rel="Ext.data.Store-method-sync" class="docClass">sync</a> method. Example usage: <pre><code>myProxy.batch({ create : [myModel1, myModel2], update : [myModel3], destroy: [myModel4, myModel5] }); </code></pre> Where the myModel* above are <a href="#!/api/Ext.data.Model" rel="Ext.data.Model" class="docClass">Model</a> instances - in this case 1 and 2 are new instances and have not been saved before, 3 has been saved previously but needs to be updated, and 4 and 5 have already been saved but should now be destroyed. Note that the previous version of this method took 2 arguments (operations and listeners). While this is still supported for now, the current signature is now a single <code>options</code> argument that can contain both operations and listeners, in addition to other options. The multi-argument signature will likely be deprecated in a future release. Creates and returns an <a href="#!/api/Ext.data.Request" rel="Ext.data.Request" class="docClass">Ext.data.Request</a> object based on the options passed by the <a href="#!/api/Ext.data.Store" rel="Ext.data.Store" class="docClass">Store</a> that this Proxy is attached to. Specialized version of buildUrl that incorporates the <a href="#!/api/Ext.data.proxy.Rest-cfg-appendId" rel="Ext.data.proxy.Rest-cfg-appendId" class="docClass">appendId</a> and <a href="#!/api/Ext.data.proxy.Rest-cfg-format" rel="Ext.data.proxy.Rest-cfg-format" class="docClass">format</a> options into the generated url. Override this to provide further customizations, but remember to call the superclass buildUrl so that additional parameters like the cache buster string are appended. Call the original method that was previously overridden with <a href="#!/api/Ext.Base-static-method-override" rel="Ext.Base-static-method-override" class="docClass">override</a> <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { constructor: function() { alert("I'm a cat!"); } }); My.Cat.override({ constructor: function() { alert("I'm going to be a cat!"); var instance = this.callOverridden(); alert("Meeeeoooowwww"); return instance; } }); var kitty = new My.Cat(); // alerts "I'm going to be a cat!" // alerts "I'm a cat!" // alerts "Meeeeoooowwww" </code></pre> Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>). <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Base', { constructor: function (x) { this.x = x; }, statics: { method: function (x) { return x; } } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived', { extend: 'My.Base', constructor: function () { this.callParent([21]); } }); var obj = new My.Derived(); alert(obj.x); // alerts 21 </code></pre> This can be used with an override as follows: <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.DerivedOverride', { override: 'My.Derived', constructor: function (x) { this.callParent([x*2]); // calls original My.Derived constructor } }); var obj = new My.Derived(); alert(obj.x); // now alerts 42 </code></pre> This also works with static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2', { extend: 'My.Base', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Base.method } } }); alert(My.Base.method(10); // alerts 10 alert(My.Derived2.method(10); // alerts 20 </code></pre> Lastly, it also works with overridden static methods. <pre><code> <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Derived2Override', { override: 'My.Derived2', statics: { method: function (x) { return this.callParent([x*2]); // calls My.Derived2.method } } }); alert(My.Derived2.method(10); // now alerts 40 </code></pre> Removes all listeners for this object including the managed listeners Removes all managed listeners for this object. Performs the given create operation. Performs the given destroy operation. Enables events fired by this Observable to bubble up an owner hierarchy by calling <code>this.getBubbleTarget()</code> if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>. The default implementation in <a href="#!/api/Ext.Component" rel="Ext.Component" class="docClass">Ext.Component</a> returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example: <pre><code><a href="#!/api/Ext-method-override" rel="Ext-method-override" class="docClass">Ext.override</a>(<a href="#!/api/Ext.form.field.Base" rel="Ext.form.field.Base" class="docClass">Ext.form.field.Base</a>, { // Add functionality to Field's initComponent to enable the change event to bubble initComponent : <a href="#!/api/Ext.Function-method-createSequence" rel="Ext.Function-method-createSequence" class="docClass">Ext.Function.createSequence</a>(Ext.form.field.Base.prototype.initComponent, function() { this.enableBubble('change'); }), // We know that we want Field's events to bubble directly to the FormPanel. getBubbleTarget : function() { if (!this.formPanel) { this.formPanel = this.findParentByType('form'); } return this.formPanel; } }); var myForm = new Ext.formPanel({ title: 'User Details', items: [{ ... }], listeners: { change: function() { // Title goes red if form has been modified. myForm.header.setStyle('color', 'red'); } } }); </code></pre> Encodes the array of <a href="#!/api/Ext.util.Filter" rel="Ext.util.Filter" class="docClass">Ext.util.Filter</a> objects into a string to be sent in the request url. By default, this simply JSON-encodes the filter data Encodes the array of <a href="#!/api/Ext.util.Sorter" rel="Ext.util.Sorter" class="docClass">Ext.util.Sorter</a> objects into a string to be sent in the request url. By default, this simply JSON-encodes the sorter data Fires the specified event with the passed parameters (minus the event name, plus the <code>options</code> object passed to <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>). An event may be set to bubble up an Observable parent hierarchy (See <a href="#!/api/Ext.Component-method-getBubbleTarget" rel="Ext.Component-method-getBubbleTarget" class="docClass">Ext.Component.getBubbleTarget</a>) by calling <a href="#!/api/Ext.util.Observable-method-enableBubble" rel="Ext.util.Observable-method-enableBubble" class="docClass">enableBubble</a>. Returns the HTTP method name for a given request. By default this returns based on a lookup on <a href="#!/api/Ext.data.proxy.Ajax-property-actionMethods" rel="Ext.data.proxy.Ajax-property-actionMethods" class="docClass">actionMethods</a>. Returns the model attached to this Proxy Returns the reader currently attached to this proxy instance Returns the writer currently attached to this proxy instance Checks to see if this object has any listeners for a specified event Initialize configuration for this class. a typical example: <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.awesome.Class', { // The default config config: { name: 'Awesome', isAwesome: true }, constructor: function(config) { this.initConfig(config); } }); var awesome = new My.awesome.Class({ name: 'Super Awesome' }); alert(awesome.getName()); // 'Super Awesome' </code></pre> Shorthand for <a href="#!/api/Ext.util.Observable-method-addManagedListener" rel="Ext.util.Observable-method-addManagedListener" class="docClass">addManagedListener</a>. Adds listeners to any Observable object (or <a href="#!/api/Ext.dom.Element" rel="Ext.dom.Element" class="docClass">Ext.Element</a>) which are automatically removed when this Component is destroyed. Shorthand for <a href="#!/api/Ext.util.Observable-method-removeManagedListener" rel="Ext.util.Observable-method-removeManagedListener" class="docClass">removeManagedListener</a>. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Shorthand for <a href="#!/api/Ext.util.Observable-method-addListener" rel="Ext.util.Observable-method-addListener" class="docClass">addListener</a>. Appends an event handler to this object. For example: <pre><code>myGridPanel.on("mouseover", this.onMouseOver, this); </code></pre> The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example: <pre><code>myGridPanel.on({ cellClick: this.onCellClick, mouseover: this.onMouseOver, mouseout: this.onMouseOut, scope: this // Important. Ensure "this" is correct during handler execution }); </code></pre> One can also specify options for each event handler separately: <pre><code>myGridPanel.on({ cellClick: {fn: this.onCellClick, scope: this, single: true}, mouseover: {fn: panel.onMouseOver, scope: panel} }); </code></pre> Performs the given read operation. Relays selected events from the specified Observable as if the events were fired by <code>this</code>. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent: <pre><code>this.relayEvents(this.getStore(), ['load']); </code></pre> The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the <code>this</code> keyword. Removes an event handler. Removes listeners that were added by the <a href="#!/api/Ext.util.Observable-method-mon" rel="Ext.util.Observable-method-mon" class="docClass">mon</a> method. Resumes firing events (see <a href="#!/api/Ext.util.Observable-method-suspendEvents" rel="Ext.util.Observable-method-suspendEvents" class="docClass">suspendEvents</a>). If events were suspended using the <code>queueSuspended</code> parameter, then all events fired during event suspension will be sent to any listeners now. Sets a value in the underlying <a href="#!/api/Ext.data.proxy.Server-cfg-extraParams" rel="Ext.data.proxy.Server-cfg-extraParams" class="docClass">extraParams</a>. Sets the model associated with this proxy. This will only usually be called by a Store Sets the Proxy's Reader by string, config object or Reader instance Sets the Proxy's Writer by string, config object or Writer instance Get the reference to the class from which this object was instantiated. Note that unlike <a href="#!/api/Ext.Base-property-self" rel="Ext.Base-property-self" class="docClass">self</a>, <code>this.statics()</code> is scope-independent and it always returns the class from which it was called, regardless of what <code>this</code> points to during run-time <pre><code><a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.Cat', { statics: { totalCreated: 0, speciesName: 'Cat' // My.Cat.speciesName = 'Cat' }, constructor: function() { var statics = this.statics(); alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to // equivalent to: My.Cat.speciesName alert(this.self.speciesName); // dependent on 'this' statics.totalCreated++; }, clone: function() { var cloned = new this.self; // dependent on 'this' cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName return cloned; } }); <a href="#!/api/Ext-method-define" rel="Ext-method-define" class="docClass">Ext.define</a>('My.SnowLeopard', { extend: 'My.Cat', statics: { speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard' }, constructor: function() { this.callParent(); } }); var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat' var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard' var clone = snowLeopard.clone(); alert(<a href="#!/api/Ext-method-getClassName" rel="Ext-method-getClassName" class="docClass">Ext.getClassName</a>(clone)); // alerts 'My.SnowLeopard' alert(clone.groupName); // alerts 'Cat' alert(My.Cat.totalCreated); // alerts 3 </code></pre> Suspends the firing of all events. (see <a href="#!/api/Ext.util.Observable-method-resumeEvents" rel="Ext.util.Observable-method-resumeEvents" class="docClass">resumeEvents</a>) Shorthand for <a href="#!/api/Ext.util.Observable-method-removeListener" rel="Ext.util.Observable-method-removeListener" class="docClass">removeListener</a>. Removes an event handler. Performs the given update operation. Creates the Proxy Config object.