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

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.

Rapid Ext JS 1.0.0


top

Rapid Ext JS Extension Features

Content

  • Open an existing project
  • Create a new Ext JS application
  • Sencha Toolbox
  • Zooming
  • Screen resolution selector
  • Component Hierarchy
  • Package Explorer
  • Action Commands
  • View Modes
  • New View Generator
  • Sencha Toolbox Reposition
  • Color Themes compatible with VS code
  • UX components
  • Component Configurations
  • Modified config Filter
  • Undo/Redo feature
  • Copy-Paste feature
  • Recently/frequently used components
  • Capability to run the application on Emulator directly
  • Added more sample templates

Open existing project

This feature is used to migrate the CMD-based and Ext-gen applications into Rapid Ext JS.

  1. Click on “Open existing project,” Import the application that you wish to use into the Rapid Ext JS.
  2. You will get a confirmation message. If you click “Yes” you can modify the new application name and path. After modifying the name and path, click “Yes” to migrate. If you click "No" Rapid Ext JS Extension will be disabled and the application will be opened with VS code Editor, normally.

open

Create new Ext JS application

If you are a licensed Sencha customer, login with your Sencha credentials to access premium components. Non-licensed users can also use Rapid Ext JS to generate applications with limited component access as trial users.

Create an Application by filling the application name, the path to generate the app, the theme, template, toolkit, Ext-gen version, and packages. A sample application will be generated based on user selections. Note: Application generation time will be varied on the packages that the user selects.

create

Sencha Toolbox

The Sencha Toolbox provides a list of components, plugins, and configurations. The user can look for components by name, xtype, alias or alternate class name. Users can drop any components into the canvas and the respected code will be updated in the file. The dropped component can be customized using configurations.

toolbox

Zooming

The canvas can be adjusted by zooming in between 25% to 500%. A quick reset button is available to reset to the original size of the canvas.

zooming

Screen resolution selector

The Screen resolution selector provides 15 different device resolutions along with the option to change width and height. This helps visual notation of components for different resolutions on the canvas.

screen resolution

Component Hierarchy

Component Hierarchy hold the structure of the components in canvas as a tree view. Hierarchy focuses the component on canvas and highlights the code of that component, when clicking on any component. If any component contains functions, they will be added to the component hierarchy.

component hierarchy

Package Explorer

Package Explorer has a standard and premium package which can be downloaded and installed by the user. It also lets users to manually add packages, if they have packages locally downloaded or one-click installation handled by Rapid Ext JS extension.

package explorer

Action Commands

Action Command provides four options:

Restart watch – The Sencha app watch command will stop and restart.

Stop watch – It will stop all the running Ports.

Run build – The Sencha app build command will trigger.

Build Dynamic Packages – It will Dynamically load the packages. This helps when adding packages post-generating applications using the Package Explorer option on the Rapid Ext JS extension.

action commands

View Modes

There are three switch buttons to toggle between Code, Design and Split view:

Code - Shows only the ‘Code’ editor or switch the user to the already opened ‘Code’ editor for that file. It also allows users to switch to the ‘Design’ view from the ‘Code’ view.

Design - Shows only the ‘Design’ canvas and closes any other views that are open. Users can drag any component from the Sencha toolbox and drop it inside the design canvas. There are also options to Copy, Paste, Duplicate and Delete the component when right-clicking the selected component.

Split View - Shows the ‘Design’ and ‘Code’ view side by side. This allows users to make changes to the design as well as the code editor. Visually shows the changes and code updates simultaneously.

view modes

New View Generator

Rapid Ext JS provides an option to generate the custom view folder as per the user selections. Users can select the new view he wishes to generate. Users can also select the file he needs to add into the view folder. These are the view types available in Rapid Ext JS:

Panel – The panel view type is created along with Model, Controller and SCSS file.

Container – Container view type is created along with Model, Controller and SCSS file.

Tab panel - Tab Panel view type is created along with Model, Controller and SCSS file.

Grid – Grid view type is created along with Model, Controller and SCSS file.

Window – Window view type is created along with Model, Controller and SCSS file. It is only available in Classic and Universal Toolkit.

view generator

Sencha Toolbox Reposition

Rapid Ext JS has a cool feature of repositioning the Sencha toolbox to the left, right and bottom. By default, the Sencha toolbox position will be right. Users can reposition it through the VS code settings.

toolbox reposition

Color Themes compatible with VS code

VS code can change the color theme of the editor background. Rapid Ext JS has given support with every theme color in VS code. The default VS code color will be ‘Dark’. Users can change themes by navigating to view > Command palette > search for 'color themes'

themes with vs code

create project

create new project

UX components

Rapid Ext JS Extension supports more than 120 components in Classic and 135+ components in Modern according to the user license tier. All these components can be draggable into the canvas. After dropping the components, the code will be updated automatically in the code file. Users can experience the design of that component in canvas. They can also filter the component by name, class name, xtype, alternate class name, and alias.

Component Configurations

The configuration list will be refreshed when selecting any component. Users can use any configuration associated with the component and search the configuration by Key or Value. If the user adds any wrong value to the config, that code will be removed and updated by the default value if it is available. At the bottom, the user can add or delete an event listener associated with the component. Users can also add or delete custom functions and arguments.

component configurations

Modified config Filter

Below is the Configuration search bar, a checkbox is added to filter the modified configs. If the user checks or unchecks the checkbox, all the modified configs of the respected component can be filtered for quick access.

modified configs filter

Undo-Redo feature of components across the design views.

Introduced Undo-Redo feature of components across the design views. A user can easily undo/redo design changes, and the changes are updated in the codeview.

Clone setup

Copy-Paste feature

Introduced Copy-Paste feature of components across the views. Users are able to interact between the components across the views by allowing Copy components from view1 and Paste them into view2 on the design view.

Clone setup

Listing of dependencies

Lists missing files on the user machine and provides information on required dependencies. Missing Dependencies view to highlight prerequisites (Java, Node/NPM) before using Rapid Ext JS features is developed.

Capability to run the application on Emulator directly

The capability to run an application directly on an emulator is a crucial feature, offering a simulated environment that mirrors the target device. Rapid Ext JS application comes equipped with a documentation emulator, providing users with a real-time preview and interactive editing environment to streamline the documentation creation process.

Emulators enable a more efficient development workflow by providing a quick and cost-effective way to assess the application's performance across various devices and screen sizes. This capability enhances the overall development experience, fostering rapid iteration and ensuring a smoother deployment process of applications.

Clone setup

Added more sample templates

In Rapid Ext JS, the addition of default templates from Sencha Examples greatly enhances the application development process. These templates serve as valuable starting points, allowing users to generate new applications swiftly and efficiently. Leveraging the Sencha Examples as templates provides developers with a standardized and proven foundation, ensuring best practices and consistency in their projects.

The following samples are used in Rapid Ext JS as templates from which users can generate a starting app:

  • Admin Dashboard(universalclassicmodernadmindashboard)
  • Executive Dashboard(classicexecutivedashboard)
  • Ticket App(classicticketapp)
  • Ext JS Calendar(classiccalendar)
  • Portal Demo(classicportal)
  • Simple Tasks(classicsimpletask)
  • Accessibility Demo(classicsimpletask)
  • Patient Hospital Assignment(classicpatienthospital)
  • Employee Directory(moderncoworkee)

By incorporating these samples into the Rapid Ext JS framework, users can expedite the creation of robust applications while benefiting from the expertise encapsulated in Sencha's exemplary code snippets. This integration facilitates a seamless and productive development experience for Ext JS applications.

Use Bind Configuration in Sencha Toolbox

  • For a simple bind, click on the component and search for 'bind' in the search field. In the suggestions, the user will get two values stored in the ViewModel. If the default bind property of the component is 'text,' the user can use it directly.

simple bind

  • If you want to bind a config which is not a default bind property then you have to pass config while using bind from the configlist like shown in the GIF below.

style bind

  • You can also bind multiple configs as shown in the GIF below.

multi bind

  • You can also perform operation like concatenation as shown in the GIF below.

add bind

Excluded components list from Sencha toolbox for drag and drop:

Path xtype
Ext.grid.Tree tree
Ext.Editor editor
Ext.LoadMask loadmask
Ext.Mask mask
Ext.MessageBox messagebox
Ext.field.trigger.Time timetrigger
Ext.Dialog window
Ext.d3.hierarchy.tree.HorizontalTree d3-horizontal
Ext.slider.Thumb thumb
Ext.tip.ToolTip tooltip
Ext.menu.ColorPicker colormenu
Ext.exporter.Base exporter.base
Ext.pivot.plugin.configurator.Container pivotconfigcontainer
Ext.pivot.plugin.configurator.Panel pivotconfigpanel

Rapid Ext JS 1.0.0