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 IDE Plugins 6.x

Guides
API
top

Sencha JetBrains Plugin

Introduction to the Sencha Ext JS JetBrains Plugin

Sencha's JetBrains plugin is an Integrated Development Environment tool that creates a confluence between Sencha Frameworks and JetBrains software. This integration comes in the form of code completion, inspection, and suggestion, while seamlessly cooperating with native JetBrains behavior.

Sencha experts will love the the ease with which changes are refactored and how simple it is to trace code to the source.

Sencha beginners will benefit as the JetBrains plugin provides completion suggestions while encouraging best-practice code structure and syntax.

Installation

Requirements

  1. Any of the following JetBrains Products:

    Please use version 6.0.11 for 2016.1+ releases of JetBrains IDEs

    Please use version 6.0.8 for the following releases of JetBrains IDEs:

    • IntelliJ 15.0.2+

    • WebStorm 11.0.2+

    • PhpStorm 10.0.2+

    • RubyMine 8.0.2+

    • PyCharm 5.0.2+

      Please use version 6.0.6 for the following releases of JetBrains IDEs:

    • IntelliJ 15.0.0, 15.0.1

    • WebStorm 11.0.0, 10.0.1

    • PhpStorm 10.0.0, 10.0.1

    • RubyMine 8.0.0, 8.0.1

    • PyCharm 5.0.0, 5.0.1

      Please use version 6.0.5 for the following releases of JetBrains IDEs:

    • IntelliJ 14

    • WebStorm 10

    • PhpStorm 9

    • RubyMine 7

    • PyCharm 4

      Note: Sencha JetBrains plugin is only compatible with Ultimate versions of JetBrains IDEs. Community Editions are not currently supported.

  2. Sencha Cmd 4+ (optional)

  3. A Sencha Framework Development Source (un-minified)

    • Ext JS 4.2+

    • Touch 2.1+

Installation Instructions

Installing the Sencha JetBrains Plugin can be done completely from within the IDE.

  1. Open the Settings dialog

    • Ctrl+Alt+S for Windows

    • ⌘+, for Mac

  2. Select "Plugins" from the leftmost navigation tree

  3. Click "Browse Repositories" on the bottom of the right panel

  4. Type "Sencha" into the top search bar

  5. Once you've isolated the Sencha plugin, right click it and select "Download and Install".
    Alternatively, you may click "Install Plugin" in the right panel.

  6. Click "Yes" when prompted to install the plugin.

  7. Your IDE will then download and install the plugin

  8. Restart your IDE for the changes to take effect

At this point, you should be in good shape to start using the Sencha JetBrains plugin.

Licensing

The Sencha JetBrains Plugin is a part of Ext JS Pro and Premium packages, and requires a valid license to use.

A fully-functional 30 day trial of the plugin is available, and will be tied to your Sencha Forum ID.

Upon starting your preferred JetBrains IDE, you will be presented with the Registration dialog:

license registration

Enter your Sencha Forum ID and password. You are required to accept the License Agreement by selecting the appropriate checkbox.

After clicking OK:

  • If you already have an active license, your plugin will be registered and trial/license notifications will disappear.

  • If you are starting or resuming a trial, the plugin will notify you how many days are remaining in your trial with a balloon notification and status bar update at the bottom right of a project window.

  • If your trial has expired, the plugin will prompt you for an activation code via the Activate window.

If you purchased a license and haven't yet used your activation code, click on the "Already have a license key?" to open the Activate window.

License Activate Window

Enter your Sencha Forum ID, password, and activation code you received from your license purchase.
Once your account is associated with a license, you do not need to activate the plugin in the future.

If you do not register with a trial or valid account, or your trial has lapsed beyond 30 days, the Sencha JetBrains Plugin functionality will be disabled. To register or activate your plugin, click on the links in the balloon notifications, or on the text at the bottom right of a project window

The license is valid for multiple JetBrains products on your machine. If you registered one product, such as IntelliJ, when you open up WebStorm you will not need to register or login again. Instead, it will use your existing trial or paid license. You will see a dialog informing you who the plugin is registered to, how many days remain in the trial (if appropriate), and the option to report anonymous statistics.

License new IDE dialog

Once you dismiss this dialog, you will never see it again within this IDE. Any other new JetBrains IDEs you use will display this dialog once on the first startup.

To see who the plugin is currently registered to, you can see this at the bottom of the Sencha preferences screen:

Preferences->Other Settings->Sencha

Features

The JetBrains IDE Plugin is rich in functionality and simple to use. Features include:

  • Code Completion

  • Code Inspection

  • Code Navigation

  • Code Generation

  • Refactoring

  • Template Creation

  • Run Configuration

  • Spellchecking

Let's walk through each of these.

Code Completion

Let's begin reviewing the benefits of Sencha JetBrains IDE Plugin with one of the most handy features; code completion. This feature allows you to receive completion suggestions for the appropriate visibility scope. This applies to almost any framework item, including:

  • Config, method, and property names for all Ext JS and user classes
  • Values for alias properties such as xtype, controller, viewModel, layout, etc...
  • Event names in Component.on, .mon, .un, .mun, and listeners objects
  • CSS class names in all config properties and methods ending in 'cls'
  • this.lookupReference(...) in controllers with an alias
  • Controller methods in listeners: { (event): (methodName) } as well as handler config property
  • Model/store fields for Ext.grid.Column.dataIndex
  • Properties from the ViewModel in bind configs

For instance, if you were to start typing "xtype: ", you would be presented with a list of all available xtypes. As you continue typing, the suggestion list will filter until you arrive at the xtype you seek. At that point, you can simply select the item from the dropdown via mouse click, or more simply, select it by hitting the "tab" key.

image alt text

This will fill in the xtype with the selected item and appropriately wrap it with quotes as needed.

Code Inspection

The JetBrains IDE plugin provides code inspection to help developers keep their code clean, efficient, and accurate. The severity for each of the inspections listed below can be adjusted or disabled entirely via Preferences... Editor.. Inspections... JavaScript... Sencha.

Requires & Uses

It's easy to gloss over the requires and uses arrays as your application evolves. For instance, if you require a class that your application no longer needs, you may create unnecessary overhead in your final application. That's where the plugin comes into play.
If it detects a requires for something that is not used, it will highlight the requirement and let you know!

image alt text

If you click within the class name, the intention action alert (a small light bulb icon) will appear. This light bulb gives you the opportunity to take some action based on the warning.
This particular action allows you remove the unused class or classes.

image alt text

Note: Some users may find this feature unnecessary if they are using ext-all.js. You may disable inspections by going here:

Preferences->Editor->Inspections->JavaScript->Sencha->Detect missing or unused dependencies

Note: You can configure the plugin to automatically add and remove classes from the requires array by going here:

Preferences->Other Settings->Sencha->Manage requires array

Missing Methods

Additionally, the IDE ensures that any methods you may reference actually exist in your controller. If not, the quick-fix automatically creates a method with the correct parameters and docs.

Unknown Classes

You will receive a similar visual warning if you attempt to reference something that the plugin can not find, or your class has not required. For instance, if you reference an xtype that has not been included in your class, you will receive the following warning:

image alt text

In this case, the action item allows you to inject the necessary class(es) into your requires or uses array.

image alt text

You will receive similar notifications with possible resolutions for the following scenarios:

  • Class declaration does not match directory structure (and visa versa)

  • References to missing controller methods

  • initComponent without this.callParent()

Code Navigation

Combining JetBrains's native functionality with the JetBrains Plugin's knowledge of the framework provides an incredibly powerful navigation tool. You may navigate to the source member of any framework or custom class by clicking on it while holding CTRL (Command on Mac).

For instance, if you were to perform this action on myCustomFunction, you will be taken to the class in which you created that function. Additionally, clicking layout: 'border' will take you to the Ext JS source code that defines Ext.layout.container.Border.

This functionality enables users to quickly move throughout their application without the need for searching a tree or directory structure.

Code Generation

The JetBrains Plugin can also generate code snippets to simplify developer effort and reduce typing. These code generation options can be opened by right clicking on the editor window, and by selecting Generate...

Generate Columns from Model

Any Ext JS class that extends an Ext.grid.Panel can have its columns property automatically generated.

Simply choose the Generate columns from model option from the Generate menu, and the Plugin will automatically find the fields from the model and create the columns property with all the fields mapped in your current class. If the class already has a columns property, it will add only the missing fields.

The column generation is relative to where the caret is in the editor. For example, the plugin can either generate columns for the UserView class below, or for the grid xtype in items based on the editor's caret location.

Ext.define('App.view.main.UserView', {
    requires: [
        'App.view.user.UserModel',
        'Ext.grid.Panel'
    ],

    extend: 'Ext.grid.Panel',

    viewModel: "user",
    bind: {
        store: '{users}'
    },

    items: [{
        xtype: 'grid',
        store: 'Offices'
    }]
})

Refactoring

Refactoring provides an incredible time saving feature, which comes native to JetBrains with a little extra help from the JetBrains IDE Plugin. Oftentimes in development, you will happen upon the need to rename a file. However, that can wreak havoc on file dependencies.

Let's say you have a file called MyApp.view.main.Main, but you've decided it's better suited being located in a subfolder, which changes the namespace to MyApp.view.submain.MainView.
If you were to simply move the file, the namespace would typically be wrong, and all dependencies would break. This is no longer an issue with the JetBrains IDE Plugin. Simply drag the Main file into your submain folder. You will be presented with a dialog. Ensure that "search for references" is checked and click "ok". All references to MyApp.view.main.Main will be updated across your entire application accordingly.

This works with renaming as well. Just right-click the file and select "refactor -> rename".

image alt text

Provide your new name, ensuring that the boxes are checked, and click "Refactor". Again, all occurrences of your file will be updated.

Templates

It can be tedious to create a bare bones structure every time you need a new class. The JetBrains IDE Plugin removes the grunt work by offering you a template creation tool. Simply right+click on a folder within your application's structure and you will be presented with a context menu. Select the "New" menu option to see what is available:

Ext JS Workspace

Ext JS App

  • Note: This requires an installation of Sencha Cmd.
  • An option to create a new Ext JS App is displayed when you right-click on any directory outside of an existing Ext app in the project tree.
  • This is very similar to creating a New Ext JS App Project (see Generating a New Application Project), but instead creates an app inside an existing project.
  • If this App will exist within an Ext JS Workspace, you can select an SDK already associated with the workspace (Ext JS and Touch), or specify your own.
    If your workspace already has both an Ext JS and Touch SDK, you cannot specify another SDK.
  • You also have the option of creating a Run configuration (see Run Configuration)

    image alt text

Ext JS Class

  • You can create a new Ext JS class in any folder under 'app' in an application, or 'src' in a package

  • From there, you can create a new Ext JS Class or App. Clicking "Ext JS Class" will present a menu containing the various class types you can generate:

    image alt text

  • The class type will be automatically selected depending on the folder, e.g. if you are creating a new class in the 'store' folder, then Kind will default to 'Store'

  • Once you name your new Class and select a class type, simply click "OK" and an appropriately name-spaced class will be created for you.

Ext JS Package

  • Note: This requires an installation of Sencha Cmd.
  • You can create a new Ext JS Package in the appropriate packages folder in a workspace
  • Specify your Sencha Cmd location
    • The plugin will default to the last Sencha Cmd location used within the IDE.
  • Select your type of package: Code, Locale, Theme

    image alt text

View Package

  • If you are in the 'view' folder of an application, you can use the ViewPackage generation to quickly create a package folder with View, ViewModel, and ViewController classes with the same name.

    image alt text

Live Templates

The Sencha JetBrains Plugin also contains the ability to utilize JetBrains's live template system. A "live template" is a feature that allows you to type a short code and then tab complete to expand it into a commonly used code pattern. The plugin currently contains a single live template but more are on the way!

xc

Our lone template currently expands from "xc" + tab, into:

Ext.create('', {

});

You may also add your own live templates by checking out:

Preferences -> Editor -> Live Templates 

Run Configuration

Note: This requires an installation of Sencha Cmd.

It allows you to run Cmd's "sencha app watch" feature from within the IDE. This allows you to see compilation errors as they occur and address them accordingly.

You may run "sencha app watch" by clicking the green "play" button in the top right corner of the screen.

image alt text

A Run configuration is created automatically for you when creating a new Ext JS Application project. When creating an Ext JS Application inside an existing project, you have the option to create a new run configuration.

Create a new Run Configuration

  • Select the run dropdown at the top right of the IDE next to the Run and Debug icons, and select Edit Configurations... image alt text or
  • Select the "Run" menu, and select Edit Configurations...
  • Press the + icon at top left
  • Select "Sencha App Watch"
  • Enter an appropriate name, point it to an Ext JS Application directory and a valid Cmd location
  • Click OK

Spellcheck

The plugin also adds many common Ext JS keywords such as xtype, xclass, and event names to the IDE dictionary. This ensures that they are not flagged as misspellings so that spellchecking remains clean and accurate.

Support and Feedback

Ask questions, report problems, and give feedback using the JetBrains IDE Plugin Forum.

The forum can also be reached from within the IDE via:

Help -> Sencha Ext JS Plugin Feedback

Opening an Existing Ext JS Application or Workspace

You can easily open up an existing Ext JS Application or Workspace through the IDE, simply:

  1. Select "Open" from the IDE splash screen or File menu

  2. Locate and select the directory your workspace or application already resides in.

Note: JetBrains products will spend a minute or two indexing your project initially.
Once it's completed, you'll find your application indexed and ready to go.

Projects Created Without Sencha Cmd

The plugin supports projects that were not originally build with Sencha Cmd, but some additional configuration is required to get code completion working if the Ext JS or Sencha Touch SDK is not located within your project's directory tree. To enable code completion, simply create a Library definition for Ext JS or Sencha Touch so that the plugin knows where the framework classes are located:

  1. From the Preferences dialog, select Languages & Frameworks... JavaScript... Libraries and click the "Add" button.

  2. Create a Library definition for Ext JS using the following settings:

    • Name: ("Ext JS" or "Sencha Touch")
    • Framework type: <Custom>
    • Visibility: Project
    • Directories: (the root of your Ext JS or Sencha Touch SDK)

You should see the IDE do some additional indexing once these changes are applied. Once that is done the plugin will recognize the classes in your SDK and code completion should work correctly.

Projects with both Sencha Touch and Ext JS

Projects that contain both Sencha Touch and Ext JS or multiple versions of either framework require additional configuration for code completion to work correctly. You must create separate library definitions for the Sencha Touch and Ext JS sections of your app so that the plugin can determine which framework applies to which sections of your code. Follow these steps to configure libraries:

  1. From the Preferences dialog, select Languages & Frameworks... JavaScript... Libraries and click the "Add" button.

  2. Create a Library definition for Ext JS using the following settings:

    • Name: Ext JS
    • Framework type: <Custom>
    • Visibility: Project
    • Directories: (Ext JS SDK directory)
  3. Create a Library definition for Sencha Touch using the following settings:

    • Name: Sencha Touch
    • Framework type: <Custom>
    • Visibility: Project
    • Directories: (Touch SDK directory)

      The Library Preferences View should now look like this:

      libraries

  4. Click "Manage Scopes"

  5. Remove "Ext JS" and "Sencha Touch" from the root of the project.
  6. Add "Ext JS" to the root directory of your Ext JS app.
  7. Add "Sencha Touch" to the root directory of your Touch app.

    The library scopes dialog should look like this:

    library scopes

Note: the steps above are not needed for Ext JS 6 universal apps. The plugin automatically understands the Ext JS 6 app directory structure and will provide the correct code completion suggestions without additional configuration.

Generating a New Workspace Project

Note: This requires an installation of Sencha Cmd.

To create a new Ext JS Workspace project, simply:

  1. Click "Create New Project" from the splash screen

  2. Select "Sencha" from the left navigation (IntelliJ only)

  3. Select "Ext JS Workspace"

  4. Click "Next"

  5. Give your project a name and location

  6. Enter/choose the path of your Sencha Cmd location

    • The plugin will default to the last Sencha Cmd location used within the IDE.
  7. If you want to specify an existing SDK (Ext JS or Touch) for this workspace, you can select "Add new SDK to workspace".

    • Enter the path to an appropriate Sencha SDK. This defaults to the last used SDK folder.
    • Sencha Cmd will copy this SDK into the workspace when the project is created.
    • Otherwise, select "No SDK" and the workspace will be created without an SDK. This will be added when an Ext JS App is added to a workspace.
  8. Click "Finish" - Sencha Cmd will now generate the workspace

    image alt text

Note: JetBrains products will spend a minute or two indexing your project initially.
Once it's completed, you'll find your application indexed and ready to go.

Generating a New Application Project

Note: This requires an installation of Sencha Cmd.

To create a new Ext JS Application project, simply:

  1. Click "Create New Project" from the splash screen

  2. Select "Sencha" from the left navigation (IntelliJ only)

  3. Select "Ext JS Application"

  4. Click "Next"

  5. Give your project a name and location

  6. Enter/choose the path of your Sencha Cmd location

    • The plugin will default to the last Sencha Cmd location used within the IDE.
  7. Select an SDK option.

    • To use the default Ext JS SDK (equivalent to using 'sencha generate app -ext'), select "Use default Sencha Cmd Ext JS SDK".
    • If you would like to use an existing SDK, select "Use other SDK"
    • Enter the path to an appropriate Sencha SDK. This defaults to the last used SDK folder.
    • Sencha Cmd will copy this SDK into the application when the project is created.
  8. If an Ext 4.x - 6.x SDK is specified, you can also select the theme to use on this Application.

    • This defaults to the last used theme (if available in the specified SDK/toolkit).
    • The available themes are generated from the specified Ext JS SDK and toolkit (if an Ext JS 6 application)
  9. Click "Finish" - Sencha Cmd will now generate the application and associated run configuration (see Run Configuration)

Note: JetBrains products will spend a minute or two indexing your project initially.
Once it's completed, you'll find your application indexed and ready to go.

Release Notes and Schedule

JetBrains Plugin 6.0.11 - August 10, 2016

  • Provides compatibility with JetBrains 2016.2.1 changes

JetBrains Plugin 6.0.10 - July 22, 2016

  • Provides compatibility with JetBrains 2016.2 releases

  • IDEAPLUGIN-352 - No way to select current workspace sdk when adding a new app

  • IDEAPLUGIN-345 - Webstorm Plugin doesn't recognize Store

JetBrains Plugin 6.0.9 - March 17, 2016

  • IDEAPLUGIN-341 - Plugin throws exceptions when using the latest WebStorm EAP

  • IDEAPLUGIN-340 - selModel type=spreadsheet requires Ext.grid.selection.SpreadsheetModel

  • IDEAPLUGIN-339 - Auto method generation is not complete when using a handler

  • IDEAPLUGIN-335 - Classes missing from code completion in IntelliJ 15.0.3

  • IDEAPLUGIN-334 - Classes missing from code completion in IntelliJ 16 EAP

JetBrains Plugin 6.0.8 - Jan 21, 2016

  • IDEAPLUGIN-330 - Endless loop when indexing after installing 6.0.7 in Intellij 15.0.2

JetBrains Plugin 6.0.7 - Jan 8, 2016

  • IDEAPLUGIN-309 - Error reporting hangs IDEA when there are network issues

JetBrains Plugin 6.0.6 - Nov 12, 2015

  • IDEAPLUGIN-306 - Exception when generating references

JetBrains Plugin 6.0.4 - Oct 15, 2015

  • IDEAPLUGIN-297 - References to non-unique alternateClassNames are resolved incorrectly

JetBrains Plugin 6.0.3 - Oct 5, 2015

JetBrains Plugin 6.0.2 - Aug 10, 2015

JetBrains Plugin 6.0.1 - July 17, 2015

JetBrains Plugin 6.0.0 - July 1, 2015

Sencha IDE Plugins 6.x

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

Sencha Test

2.0.0 1.0.3

Cmd

Cmd

Sencha Themer

1.1.0 EA 1.0.2

GXT

5.x EA 4.x 3.x

IDE Plugins

IDE Plugins

Sencha Inspector

Sencha Inspector

Sencha Fiddle

Sencha Fiddle

Offline Documentation

Offline Documentation