Getting Started
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 is an online utility for creating, running, and sharing code examples using the Ext JS framework. Fiddle is supported on the same platforms / browsers supported by Ext JS 6.2.0. It includes an online IDE along with a view of your running example without the overhead of setting up a local environment. Fiddle 2 attempts to mimic local development, but is hosted in the cloud. Saving code examples (we’ll refer these as fiddles going forward) is as easy as signing in with your Sencha Forum username and password, saving your code, and sharing the Fiddle url.
Before we walk through creating and running a fiddle let’s first tour the UI. We’ll look at the major interface elements since we’ll be referring them throughout this and other Fiddle guides.
Fiddle title - In the top-left of the top toolbar is the title of the fiddle you’re currently viewing / authoring. Hovering over the title will reveal the description of the fiddle as well as the author, create timestamp, and last-saved timestamp.
Voting controls - To the left of the title are the voting controls showing the fiddle’s current vote rating based on the ratings from unique users along with up / down controls for adding your own vote to the total.
Login - Top-right of the top toolbar is where you’ll log in to Fiddle using your Sencha Forum credentials. Once signed in this is where you will be able to view the user preferences menu via clicking on your username.
Ext JS version / theme - To the left of the login button is the drop down control used to select the Ext JS version and theme used when running the fiddle. In addition to Ext JS you may also run example code against the Sencha Touch framework, though for simplicity we’ll refer to the Ext JS framework within the guides.
Editor Button - The editor buttons shows the Fiddle IDE panel.
Run - The run button runs the current fiddle using the selected Ext JS framework version / theme.
Search - The search button shows the search panel allowing you to search for fiddles using a combination of search criteria.
New - The new button resets Fiddle back to its initial state including the code in the editor and all File System panel files and folders.
Save - The save button saves the current fiddle code and related assets to the Fiddle database (login required).
Fork - The fork button creates a new fiddle using the saved fiddle’s code in a new fiddle instance.
Admin - The admin button shows a panel used to manage aspects of the fiddle example such as whether the fiddle shows up in the search index, who can view / edit the fiddle, and more.
Forum - The forum button towards the bottom of the left toolbar opens the Fiddle forums in a new tab.
Docs - The docs button provides quick access to the fiddle guides on the sencha documentation website within a new tab.
The file system panel is a collapsible tree view of all code, packages, and data assets used in the current fiddle. Any files or packages that have been added or edited, but not yet saved will be indicated with a yellow dot next to the file name. Below are the initial folders, files, and controls presented in a new fiddle.
Assets folder - The assets folder contains the folders, js files, html files, and css files used by the fiddle.
app.js - The app.js file in the Assets folder is the default entry point used when authoring fiddles. The app.js file
will commonly contain Ext.application() or Ext.create() logic, though any javascript may be run. This file may
not be removed.
index.html - The index.html file contains any HTML used in the body of the fiddle. This file may not be removed.
Data - The Data folder is where you will place static or dynamic content to be fetched by your fiddle through ad hoc AJAX calls or framework CRUD interactions with a remote source.
Packages - The Packages folder displays the framework packages to be used by the current fiddle.
Sencha Inspector - The Sencha Inspector control allows you to toggle integration of Sencha Inspector into your fiddle.
The editor panel is the IDE view where you will author content for the files from the File System panel. The editor panel is a tab panel. Any files open for editing will show as tabs at the bottom of the editor panel. Open files will also be indicated in the File System panel as orange text. At the bottom of each open file is a gutter showing the cursor’s position on the left and a code type selector field and Beautify button on the right. The code type selector controls the context with which the editor working and will apply code syntax highlighting to the current file based on the code type selected. Linting prompts will be displayed next to the line number when possible issues are discovered in JavaScript and CSS files. The Beautify button will attempt to beautify the code (JS/CSS/HTML only) using the selected code type.
The Preview panel is a collapsible iframe element showing the result of your fiddle when run. The Preview panel is initially hidden. Clicking the Run button in the left toolbar will reveal the Preview panel.
Note: The Preview panel may also be detached to a separate tab / window using the arrows control in the top-right of the Preview panel. If you have run fiddles in a new window the fiddle preview window / tab will be focused when a fiddle is run.
Upon opening Fiddle initially you’re presented with a sample runnable fiddle. Press the Run button and viola! Your first fiddle is now shown in the Preview panel!
As satisfying as it was to get that first fiddle up and running, let’s see about introducing some non-boilerplate code and viewing the results. Your fiddle will use the code in the app.js file as the entry point for launching a fiddle.
Let’s replace the Ext.application() logic from the new fiddle with the following:
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
height: 400,
width: 400,
frame: true,
margin: 20,
title: 'Hello',
html: 'World',
collapsible: true,
listeners: {
collapse: function () {
this.setTitle('Hello World');
},
expand: function () {
this.setTitle('Hello');
}
}
});
Now, click the Run button in the left toolbar to view the Ext JS panel in the Preview panel. Since the preview is a real execution of the supplied code within your browser you can click on the arrow to expand / collapse the panel and see the expand / collapse event handlers update the panel’s title.
From the framework version drop down control in the top toolbar choose Ext JS 5.1.0.107 Neptune and click the Run button. You’ll now see the same Ext JS panel rendered, but with the Neptune theme using Ext JS 5.1.0 GA.
Now, give your fiddle a name and description by double-clicking on the "(TITLE HERE)" text in the top toolbar. The “Set Fiddle Info” dialog will open. Enter a title and description as well as any tags you’d like to associate with this fiddle. Adding tags can greatly improve the discoverability of saved fiddles from the search panel. Finally, click the “Set” button to close the dialog window.
The Save button will be disabled until you log in. Go ahead and log into Fiddle using your Sencha Forum credentials. If you have not registered on the forums, go ahead and do so now. Once logged in you can click on the Save button in the left toolbar to save your fiddle to the server. After the save action is complete the url will have updated to look similar to:
https://fiddle.sencha.com/#view/editor|fiddle/xxxx
where the xxxx will be the fiddle’s internal id. This is the url you may share with others allowing them to run,
fork, or rate your fiddle.
Forking your fiddle is as easy as clicking on the Fork button in the left-hand toolbar. A forked fiddle will have its own fiddle id in the url and will show a fork icon next to the fiddle title.
There are a couple ways to share a fiddle and each way solves a different use case. If you want to send a link that will load Sencha Fiddle with your saved fiddle then you can provide the URL in the browser’s address bar which should look similar to:
https://fiddle.sencha.com/#view/editor|fiddle/xxxx
If you want to embed the fiddle in a web page like for a blog post, you can use an <iframe>:
<iframe src="https://fiddle.sencha.com/fiddle/xxxx” style=”height:600px;width:600px;”></iframe>
The Sencha Forums and the Sencha Support Portal has a simple way to embed a fiddle in a post using the [FIDDLE] BBCode tag:
[FIDDLE]xxxx[/FIDDLE]
Loading the whole Sencha Fiddle application to run code on a mobile device will result in a poor experience, it’s likely that you want to just see the preview. For this, you can use this url:
https://fiddle.sencha.com/fiddle/xxxx/preview
For an overview of what’s new in Fiddle 2 -vs- Fiddle 1 check out the What’s New guide. And be sure to read over the other Fiddle guides (you can use the Guides button in the left-hand toolbar) for additional insights on how to make the most of your time in Fiddle. Be sure to visit the Fiddle forums (you can use the Forum button in the left-hand toolbar) to share your thoughts, ask questions, or report any issues you may discover.
Fiddle | Terms of Use