Docs Help

Terms, Icons, and Labels

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.

Access Levels

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.

Member Types

Member Syntax

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).

lookupComponent ( item ) : Ext.Component
protected

Called when a raw config object is added to this container either during initialization of the items config, or when new items are added), or {@link #insert inserted.

This method converts the passed object into an instanced child component.

This may be overridden in subclasses when special processing needs to be applied to child creation.

Parameters

item :  Object

The config object being added.

Returns
Ext.Component

The component to be added.

Let's look at each part of the member row:

Member Flags

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.

Class Icons

- 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

Member Icons

- 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

Class Member Quick-Nav Menu

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.

Getter and Setter Methods

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.

History Bar

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.

Search and Filters

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.

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.

API Doc Class Metadata

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:

Expanding and Collapsing Examples and Class Members

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.

Desktop -vs- Mobile View

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:

Viewing the Class Source

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.

Sencha Fiddle 2.0

Guides
API
top

Getting Started with Fiddle

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.

Top Toolbar

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.

Left Toolbar

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.

File System Panel

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.

Editor Panel

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.

Preview Panel

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.

Your First Fiddle

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!

Your Second Fiddle

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');
        }
    }
});

Running the Fiddle

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.

Selecting a Framework Version

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.

Adding a Title

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.

Saving your Forking

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.

Sharing your Fiddle

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

Additional Info

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.

Sencha Fiddle 2.0

Ext JS
Sencha Test
Cmd
Sencha Themer
GXT
IDE Plugins
Sencha Inspector
Architect
Sencha Fiddle
Touch
Offline Documentation

Sencha Test

2.0.1 2.0.0 1.0.3

Cmd

Cmd

Sencha Themer

1.1.0 1.0.2

GXT

4.x 3.x

IDE Plugins

IDE Plugins

Sencha Inspector

Sencha Inspector

Sencha Fiddle

Sencha Fiddle

Offline Documentation

Offline Documentation