Making Data Requests
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, inheritance, and read only. This is done using the checkboxes at the top of the page.
The checkbox at the bottom of the API class navigation tree filters the class list to include or exclude private classes.
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.
Fiddle 2 makes it easy to fetch server-side data hosted right from within Fiddle. Fiddle lets you add one of the following file types:
JSON / JsonP
XML
plaintext
Ext Direct
When creating a data file in Fiddle you’re creating an actual file on the fiddle server of the selected file type. As
an example, let’s walk through how you could add an Employee.json file with data for two employee records. To add
the file you will right-click on the "Data" node in the File System panel and choose “Create JSON/JsonP” from the
context menu. Enter a file name of Employee.json and press <enter>. Next, enter the following in the
Employee.json tab:
[{
"id": 1,
"name": "Rick Grimes",
"role": "CEO"
}, {
"id": 2,
"name": "Daryl Dixon",
"role": "COO"
}]
The JSON file can now be served to your fiddle as a server-side file just as if you were developing locally on your own client / server environment. To read from this file you could configure a store’s proxy’s URL as follows:
store: {
proxy: {
type: 'ajax',
url: 'Employee.json'
}
}
Not only is the data file accessible from your fiddle, but it is also accessible from other fiddles. To access the
data file from another fiddle you’ll use the fiddle URL / fiddle ID / file name. For example, let’s assume
that your saved fiddle housing your re-usable data files has an ID of "abcd". In your dependent fiddle if you
wanted to consume the Employee.json file you could configure your store like:
store: {
proxy: {
type: 'ajax',
url: '/fiddle/1isc/Employee.json'
}
}
Files added to a fiddle can subsequently be renamed by right-clicking on them and choosing "Rename" from the context
menu. Enter the new name and press <enter>.
To remove a file right-click on it and choose "Delete" from the context menu. You will be prompted to confirm the deletion.
Note: Renaming and removing files that are required / linked in from other fiddles will break the linking as the files are loaded live as needed by the dependent fiddle.
Static data files will work for many of your fiddles, but some fiddles may depend on a more dynamic data set. This is
particularly true when working with a component / store wanting to do full Create, Read, Update, and Delete
operations. With dynamic data you can evaluate the params sent up to the "server" by the Ext JS client-side
code and return data sets based on that information similar to how you would in your own server pages. In our previous
JSON example we returned a static set of employees from Employee.json. Let’s look at how we can return one of the
employees from the set depending on who is requested.
First, let’s enable dynamic data in Employee.json. With the Employee.json editor tab active, check the
"Dynamic Data" checkbox in the top toolbar.
With dynamic data checked what will be returned in the "server" response will be anything returned in a
return; statement.
For this example let’s make an Ext.Ajax request. Below is the code we’ll use in our fiddle:
Ext.Ajax.request({
url: 'Employee.json',
params: {
id: 1
},
callback: function (options, success, response) {
console.log(response.responseText);
}
});
The fiddle when run will request a response from Employee.json. We’ll send a param of 1 in the request.
Before we return anything back to the calling fiddle let’s first look at how we can see what params are being sent. Let’s use the following code for our Employee.json file:
var employees = {
1: {
"name": "Rick Grimes",
"role": "CEO"
},
2: {
"name": "Daryl Dixon",
"role": "COO"
}
};
return params;
The params variable is an object with any passed params as key / value pairs. In this case we’re passing an "id"
of 1. By returning params and console.loging the responseText we see the following output in the console:
{"id": 1}
Seeing that we’re passed the "id" of “1” we can use that to return just the employee we’re interested in. Let’s modify our Employee.json to respond to the passed param:
var employees = {
1: {
"name": "Rick Grimes",
"role": "CEO"
},
2: {
"name": "Daryl Dixon",
"role": "COO"
}
};
var id = params.id,
employee = employees[id];
employee.id = id;
return employee;
By using the passed "id" param we are able to return only the employee data we’re interested in. With this logic the response is:
{"name":"Rick Grimes","role":"CEO","id":1}
Note: Fiddle uses ES6 (ECMAScript 2015) on the server when evaluating the logic in dynamic data files.
Note: Fiddle also limits dynamic data execution to 500ms.
In the previous example, we used the params argument. This argument is the parameters in the network request
for this data asset based on the request's method. For a GET request, the parameters are the query string parameters.
For any other request (POST, PUT, etc) the parameters are the body parameters.
There may be times where you need access to both the body and query string parameters. For this, you can use the req
argument which will look similar to:
{
isReq: true,
method: 'POST',
cookies: {
foo: 'bar
},
headers: {
'cache-control': 'no-cache'
},
query: {
_dc: 1482847531658
},
body: {
name: 'Sencha'
}
}
The last argument is the Fiddle argument. This is an object that holds convenient methods on it for things like sorting
and filtering that are frequently needed. The following are the currently supported methods:
sort Supports an array of sorters in the format:
[{
property: 'name',
direction: 'ASC'
}]
Note Sorting will return a new array instance.
filter Supports an array of filters in the format:
[{
property: 'name',
operator: 'like',
value: 'Sencha'
}]
Note Filtering will return a new array instance.
The following are the operators supported:
< or lt<= or le= or == or eq===>= or ge> or gt!= or ne!==innotinlike or /=notlikedata Supports sorting and filtering with the above formats:
Fiddle.data(
data,
[{
property: 'name',
direction: 'ASC'
}],
[{
property: 'name',
operator: 'like',
value: 'Sencha'
}]
);
Note Using this method will return a new array instance.
template Supports parsing a template into data:
Fiddle.template(`{
"success": true,
"users": [
{{#repeat 2}}
{
"id": {{@index}},
"name": "{{firstName}} {{lastName}}",
"work": "{{company}}",
"email": "{{email}}",
"dob": "{{date '1900' '2000' 'DD/MM/YYYY'}}",
"address": "{{int 1 100}} {{street}}",
"city": "{{city}}",
"optedin": {{boolean}}
}
{{/repeat}}
]
}`);
Fiddle will auto-inject dummy user data from your data files using a templating syntax. Loops can also be used to generate a series of responses with a small amount of code. The following example will create a server-side response for an Ext store with two user records including dummy user data for each double bracket wrapped tokens:
{
"success": true,
"users": [
{{#repeat 2}}
{
"id": {{@index}},
"name": "{{firstName}} {{lastName}}",
"work": "{{company}}",
"email": "{{email}}",
"dob": "{{date '1900' '2000' 'DD/MM/YYYY'}}",
"address": "{{int 1 100}} {{street}}",
"city": "{{city}}",
"optedin": {{boolean}}
}
{{/repeat}}
]
}
`{{#repeat count [comma=true]}} ... {{/repeat}}`
To create looped output use the {{#repeat N}} syntax to start the loop where N is the number of times to
iterate. To close the loop use {{/repeat}}. By default the output within the loop will be comma-separated. To
prevent the comma use the following syntax: {{#repeat N comma=false}}.
Within loops the following variables are available:
@index - the current loop iteration (starting with 0)
@first - true if this is the first iteration
@last - true if this is the last iteration
@total - the total number of iterations
{{int min max [format] [round=1]}}
Generates a random integer between the min and max params. The format param formats the output
using numbros. The round param rounds to the passed value.
{{int 6 12}} // 10
{{int 0 50 round=5}} // 35 - rounded to the nearest multiple of 5
{{int 5000 30000 '0,0.00'}} // 22,786.00
{{float min max [format] [round=1]}}
Generates a random floating point number from min (inclusive) up to but excluding max (exclusive).
The format param formats the output using numbros. The round param rounds to
the passed value.
{{float 0 1}} // 0.3617434016228527
{{float 0 1 round=0.1}} // 0.4
{{float 5000 30000 '0,0.00'}} // 22,786.84
{{date min max [format]}}
Generates a random date between the min and max dates. Both min and max can be any string accepted by
JavaScript’s Date.parse()
method. By default, the output will be the returned using
Date.toString(). The
format param may be used to format the output using fecha.
{{date '2001' '2016'}} // Wed Oct 22 2014 02:14:41 GMT+0000 (GMT)
{{date '2001' '2016' 'DD/MM/YYYY'}} // 22/10/2014
{{time min max [format]}}
Generates a random time between the min and max times. The min and max can be a time in the 24 hour format
HH:mm:ss. For example, 05:12:45 (with our without seconds 05:12). By default, the output will be in HH:mm
format. The format param may be used to format the output using fecha.
{{time '08:00' '17:00'}} // 09:26
{{time '08:00' '17:00' 'h:mm a'}} // 9:26 am
Random Tokens
A number of the tokens below are synced together offering some continuity (think first name, last name, and e-mail, etc). Syncing is maintained until a token is used twice or repeat loop is completed.
{{boolean}} - true or false value
{{title}} - title prefix from a predefined list such as "Mr", "Mrs", "Dr", etc.
{{firstName}} - first name
{{lastName}} - last name
{{company}} - company name
{{domain}} - domain in the format domain.tld
{{tld}} - top level domain
{{email}} - email address
{{street}} - street name
{{city}} - city name
{{country}} - country name
{{countryCode}} - country code from ISO 3166-1
{{zipcode}} - US-style 5 digit zip-code
{{postcode}} - UK-style postcode
{{lat}} - latitude between -90 and +90 to 6 decimal places
{{lon}} - longitude between -180 and +180 to 6 decimal places
{{phone [format]}} - phone number in the format xxx-xxx-xxxx, for example "123-456-7890". For a different format,
use a string in the format param using a combination of lowercase "x" characters for each random integer
(e.g. {{phone ‘+1 (xxx) xxx-xxxx’}}).
{{color}} - CSS color name
{{hexColor [websafe=false]}} - hexadecimal color code with # prefix. Use websafe=false to force only
web-safe colors.
{{guid}} - 32 digit GUID
{{ipv4}} - IPv4 address
{{ipv6}} - IPv6 address
{{lorem [wordcount]}} - lorem ipsum text. The wordcount is the number of words to generate (defaults to 25).
Fiddle | Terms of Use