Many classes have shortcut names used when creating (instantiating) a class with a
configuration object. The shortcut name is referred to as an alias
(or xtype
if the
class extends Ext.Component). The alias/xtype is listed next to the class name of
applicable classes for quick reference.
Framework classes or their members may be specified as private
or protected
. Else,
the class / member is public
. Public
, protected
, and private
are access
descriptors used to convey how and when the class or class member should be used.
Public classes and class members are available for use by any other class or application code and may be relied upon as a stable and persistent within major product versions. Public classes and members may safely be extended via a subclass.
Protected class members are stable public
members intended to be used by the
owning class or its subclasses. Protected members may safely be extended via a subclass.
Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.
static
label next to the
method name. *See Static below.Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).
Let's look at each part of the member row:
lookupComponent
in this example)( item )
in this example)Ext.Component
in this case). This may be omitted for methods that do not
return anything other than undefined
or may display as multiple possible values
separated by a forward slash /
signifying that what is returned may depend on the
results of the method call (i.e. a method may return a Component if a get method calls is
successful or false
if unsuccessful which would be displayed as
Ext.Component/Boolean
).PROTECTED
in
this example - see the Flags section below)Ext.container.Container
in this example). The source
class will be displayed as a blue link if the member originates from the current class
and gray if it is inherited from an ancestor or mixed-in class.view source
in the example)item : Object
in the example).undefined
a "Returns" section
will note the type of class or object returned and a description (Ext.Component
in the
example)Available since 3.4.0
- not pictured in
the example) just after the member descriptionDefaults to: false
)The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.
classInstance.method1().method2().etc();
false
is returned from
an event handler- Indicates a framework class
- A singleton framework class. *See the singleton flag for more information
- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)
- Indicates that the class, member, or guide is new in the currently viewed version
- Indicates a class member of type config
- Indicates a class member of type property
- Indicates a class member of type
method
- Indicates a class member of type event
- Indicates a class member of type
theme variable
- Indicates a class member of type
theme mixin
- Indicates that the class, member, or guide is new in the currently viewed version
Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.
Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.
Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.
Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.
If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.
Both API docs and guides can be searched for using the search field at the top of the page.
On API doc pages there is also a filter input field that filters the member rows
using the filter string. In addition to filtering by string you can filter the class
members by access level and inheritance. This is done using the checkboxes at the top of
the page. Note that filtering out private
members also filters the API class
navigation tree.
Clicking on an empty search field will show your last 10 searches for quick navigation.
Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:
Ext.button.Button
class has an alternate class name of Ext.Button
). Alternate class
names are commonly maintained for backward compatibility.Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.
Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.
Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:
The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.
This is the root namespace for the Sencha Test API.
The current version of Chrome (0 if the browser is not Chrome).
The current version of Firefox (0 if the browser is not Firefox).
The current version of IE (0 if the browser is not IE). This does not account for the documentMode of the current page, which is factored into isIE8, and isIE9. Thus this is not always true:
ST.isIE8 == (ST.ieVersion == 8)
True if the detected browser uses the Gecko layout engine (e.g. Mozilla, Firefox).
The current version of Safari (0 if the browser is not Safari).
The current version of WebKit (0 if the browser does not use WebKit).
Schedules a wait for an element to be absent or missing from the DOM. This is typically used after some future action that should cause a removal.
ST.button('@okButton').click();
ST.absent('@confirmationWindow'); // the window owning the OK button
This method is similar to ST.future.Element#removed but the difference is that this method does not first wait for the specified element to be found. This difference makes this method suitable for checking for things that should not be present in the first place.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the element to be removed.
Registers a locator strategy for recording target locators. A locator strategy
implements a locate method. If the locator
parameter is a function, it is treated as an implementation of such a method.
For example:
ST.addLocatorStrategy(function (el, targets) {
if (el.id) {
targets.push('>> #' + el.id);
}
});
The above locator strategy is not very useful, but illustrates the process of adding new strategies.
strategy : ST.locator.Strategy / Function
Creates and returns an ST.Alert passing along the specified config
object. This
method calls ST.Alert#show before returning the instance.
Copies all the properties of config
to the specified object
.
ST.apply(obj = {}, { a: 1 });
// obj.a === 1
object : Object
The receiver of the properties.
config : Object
The primary source of the properties.
own : Boolean (optional)
Pass true
to limit the copy to hasOwnProperty properties
of the config
object.
returns object
.
Copies all the properties of config to object if they don't already exist.
object : Object
The receiver of the properties
config : Object
The source of the properties
own : Boolean (optional)
Pass true
to limit the copy to hasOwnProperty properties
of the config
object.
returns obj
Capitalize the first letter of the given string.
string : String
Returns a new object with the given object as the prototype chain. This method is
designed to mimic the ECMA standard Object.create
method and is assigned to that
function when it is available.
NOTE This method does not support the property definitions capability of the
Object.create
method. Only the first argument is supported.
object : Object
The prototype chain for the new object.
Returns a ST.future.CheckBox used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Returns a ST.future.ComboBox used to queue operations for
when that Ext.form.field.ComboBox
becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the combobox.
Returns a ST.future.Component used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Returns a ST.future.DataView used to queue operations for
when that Ext.view.View
becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the dataview.
Lower-cases the first letter of the given string.
string : String
Similar to setTimeout
and Ext.defer
this method schedules a call to the given
method after the given delay
and returns an id that can be used to cancel the
request.
To cancel a timeout, call ST#deferCancel. Do not pass these id's to the DOM.
In some modern browsers (currently FF and Chrome timeouts are clamped to >= 1000ms for inactive tabs. https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout#Timeouts_in_inactive_tabs_clamped_to_>1000ms
This can result in much larger delays than expected when playing back recorded events since the Event Player is not guaranteed to be run in an active tab/window.
This class leverages Web Workers to emulate the browser's setTimeout and setInterval functionality without the undesirable clamping in incative tabs.
Falls back to window.setTimeout/setInterval where Web Workers are not available.
fn : Function
The function to call after delay
milliseconds.
scope : Object (optional)
The this
pointer to use for calling fn
.
delay : Number
The number of milliseconds to delay before calling fn
.
Defines a primitive class similar to the Ext JS class system. The following features are provided:
extend
singleton
statics
(like ES6, all statics are inherited)The class body or a method that will return the class body. The method is passed the class constructor as its single argument.
onComplete : Function (optional)
Optional completion method. Since this method is
synchronous, onComplete
is called immediately.
The class constructor
Iterates an array or an iterable value and invoke the given callback function for each item.
var countries = ['Vietnam', 'Singapore', 'United States', 'Russia'];
ST.each(countries, function(name, index, countriesItSelf) {
console.log(name);
});
var sum = function() {
var sum = 0;
ST.each(arguments, function(value) {
sum += value;
});
return sum;
};
sum(1, 2, 3); // returns 6
The iteration can be stopped by returning false
from the callback function.
Returning undefined
(i.e return;
) will only exit the callback function and
proceed with the next iteration of the loop.
ST.each(countries, function(name, index, countriesItSelf) {
if (name === 'Singapore') {
return false; // break here
}
});
iterable : Array / NodeList
The value to be iterated.
fn : Function< / a>
The callback function. If it returns false
, the iteration
stops and this method returns the current index
. Returning undefined
(i.e
return;
) will only exit the callback function and proceed with the next iteration
in the loop.
item : Object
The item at the current index
in the passed array
index : Number
The current index
within the array
allItems : Array
The array
itself which was passed as the first argument
return : Boolean
Return false
to stop iteration.
scope : Object (optional)
The scope (this
reference) in which the specified function
is executed.
reverse : Boolean (optional)
Reverse the iteration order (loop from the end to the beginning).
Defaults to: false
If no iteration returns false
then this method returns true
.
Otherwise this method returns the index that returned false
. See description for
the fn
parameter.
Returns a ST.future.Element used to queue operations for
when that element becomes available (not necessiarly visible
).
Once a future is returned from this method, it is typically used to describe some sequence of actions, wait for state transitions and perform inspections.
ST.element('@someEl').
click(10, 10).
textLike(/hello/i).
and(function (el) { ... });
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the element.
Returns a ST.future.Field used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Given the target
locator string, return the matching element or null
if one is not
found. See ST.Locator for a description of valid locator strings.
Alias for ST.Locator#find.
target : String
The target locator string.
wrap : Boolean (optional)
Pass true
to return a wrapped ST.Element
instead of the raw DOM node.
Defaults to: false
root : HTMLElement / ST.Element / Ext.Component (optional)
direction : "down" / "up" / "child" (optional)
Defaults to: "down"
Given one of the various ways to identify a DOM node, this method returns a
temporary, fly-weight ST.Element or null
. Instances returned by this
method should be used briefly to call the methods of the ST.Element and then
ignored since the instance will be re-used by future calls to this method.
domNode : String / HTMLElement / ST.Element / Ext.Element
flyName : String (optional)
An optional name for the fly. Passing a custom name can be used to control the scope of re-use of the returned instance.
Defaults to: "fly"
Given one of the various ways to identify a DOM node, this method returns a
temporary, fly-weight ST.Element or null
. Each call to this method returns
a new ST.Element instance. Unlike Ext.get()
this method does not maintain an
element cache nor does it assign an id
to the element. In other words, this
method is equivalent to new ST.Element()
.
domNode : String / HTMLElement / ST.Element / Ext.Element
Given one of the various ways to identify a DOM node, this method returns the
DOM node or null
.
domNode : String / HTMLElement / ST.Element / Ext.Element
Returns the first matching key corresponding to the given value. If no matching value is found, null is returned.
object : Object
value : Object
The value to find
Gets all values of the given object as an array.
object : Object
An array of values from the object
Returns a ST.future.Grid used to queue operations for
when that Ext.grid.Panel
becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the dataview.
Returns a ST.future.Panel used to queue operations for when that panel becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the panel.
Returns a ST.future.Picker used to queue operations for
when that Ext.form.field.Picker
becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the picker.
Adds an array of events to the queue and optionally calls a done
method when
the events have all been played.
events : ST.event.Playable[]
The events to play.
done : Function (optional)
Optional function to call after the events have played.
The events
array with each element now promoted
from config object to ST.event.Playable instance.
Lazily creates and returns the shared ST.event.Player. This is rarely called directly, but is the underlying mechanism used the inject events using the ST#play and ST.future.Element API's.
Takes a snapshot of the viewport and compares it to the associated baseline image.
name : String
callback : Function
timeout : Number (optional)
The maximum time (in milliseconds) to wait.
Returns a ST.future.Select used to queue operations for
when that Ext.field.Select
becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the select field.
Replaces the locator strategies with those provided to this call. For details on locator strategy see addLocatorStrategy.
The following call would produce the default strategies:
ST.setLocatorStrategies(
new ST.locator.Strategy()
);
This method is used to control the presence and order of locator strategies. The order is important to the ST.event.Recorder because the first locator strategy to produce an element locator determines the default event target and/or relatedTarget.
strategy : ST.locator.Strategy / Function
Starts the ST.event.Recorder. Once this method is called all further test execution is halted.
This method is typically injected automatically by Sencha Test Studio when using its Event Recorder and is therefore rarely called directly.
config : Object
Options to configure the ST.event.Recorder.
done : Object
Returns a ST.future.TextField used to queue operations for when that component becomes available.
locator : String
See ST.Locator for supported syntax.
timeout : Number (optional)
The maximum time (in milliseconds) to wait for the component.
Similar setTimeout
but instead returns a function that cancels the timer.
The timeout value (millisec
) defaults to ST.options.timeout
unless that value
is set to 0
in which case timeouts are disabled. In that case, fn
will never be
called.
fn : Function
The function to call after millisec
milliseconds.
scope : Object (optional)
The this
pointer to use for calling fn
.
millisec : Number (optional)
The delay in milliseconds. Defaults to ST.options.timeout
and is disabled if that value is 0
.
Returns a limited-use ST.future.Element that can be used only to wait and perform some manual steps.