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.

Architect 3


top

Building Native Android Apps with Windows 8.x/10

This guide is intended to walk users through preparing Windows 8/8.1/10 for building native Android apps with Sencha Architect. This guide focuses on environmental setup for Sencha Architect, but these steps are also necessary for building native Touch applications without Architect.

Note: This guide is intended for a clean Windows 8 machine. Some of these steps may be unnecessary if you are simply updating software.

JAVA

The first thing thing we'll do is ensure that JAVA JDK 1.7+ is installed and mapped properly in your JAVA_HOME Environment Variable.

Let's get started by downloading JAVA JDK 1.8 (Java SE 1.8).

  1. Click the "Download" button under JDK in the "Java Platform, Standard Edition" section.

  2. At this point you'll need to check the "Accept License Agreement" radio button and then click the appropriate download link. Windows x86 is for 32-bit machines, while Windows x64 is for 64-bit machines.

  3. Press "Run" when the save alert is displayed.

  4. Upon download, allow Java to make changes to your machine by clicking "Yes" on the resulting popup.

  5. Click "Next" until the installer begins to extract. After extraction, you should be allowed to change the installation directory. Make sure that you change the directory to point at the root of the C drive. Create a folder at C:\Java\ and point your installation there.

  6. Make sure that you designate another folder if it asks where you'd like to install "jre7". The JRE has been known to overwrite the JDK if the location isn't verified, which causes significant issues later down the line.

  7. Verify your JAVA installation and version by issuing the following command from your Command Prompt:

    java -version

You should see:

java version 1.8.0_xx

JAVA_HOME and the path variable

Next, you'll need to modify the JAVA_HOME Environment Variable. JAVA_HOME needs to point to the installation location that you set above.

You can set Environment Variables in Windows 8/10 by performing the following steps:

  1. Right Click the windows button in the bottom left corner
  2. Click System -> Advanced System Settings (tile view)
  3. Click on the "Advanced" tab
  4. Click "Environment Variables" in the bottom right corner of the window.

Now that you're within your Environment Variables, let's go ahead and add JAVA_HOME.

  1. Click the "New" button under "System variables"
  2. Enter "JAVA_HOME" for the variable name and "C:\Java" for the variable value.
  3. Click "Ok"

Next, let's add Java's path to the system's Path variable

  1. Find "Path" under "System variables"
  2. Click edit (on windows 10 you must also click "Edit text") and add ";%JAVA_HOME%\bin" to the end of the current variable's value. Please note that the path is delimited by ";". You'll always need to utilize the semicolon when adding a new variable.
  3. Click "Ok" to accept the changes and then "Ok" again to save

Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation. This particular installation may require a restart before all of the changes resolve.

Apache Ant

Next, let's move on to Apache Ant. If you haven’t already installed Apache Ant, you can find the binaries here.

Select your preferred flavor of compression. In this example, I have downloaded the .zip archive, found below "Current Release of Ant".

Upon clicking the link, click "Save" and download the file. Though Ant can be placed anywhere on your machine, I like to keep this software in the C:\ directory.

There is no Ant installer for windows. Simply extract the content to C:\Ant.

ANT_HOME and Path Variable

Once Ant is in place, you can set up your ANT_HOME environment variable. Unlike the JAVA_HOME environment variable, the ANT_HOME variable maps directly to the root of the ant directory.

Open your Environment Settings as we did previously and then follow these steps:

  1. Click the "New" button under "System variables"
  2. Enter "ANT_HOME" for the variable name and "C:\Ant" for the variable value.
  3. Click "Ok"

Next, let's add Ant's path to the system's Path variable

  1. Find "Path" under "System variables"
  2. Click edit (on windows 10 you must also click "Edit text") and add ";%ANT_HOME%\bin" to the end of the current variable's value.
  3. Click "Ok" to accept the changes and then "Ok" again to save

You can verify that Ant is properly installed by issuing the following command in your Command Prompt:

ant -v

It should return:

Apache Ant(™) version {version} compiled on {date}

Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation.

Ruby

Next, let's move on to Ruby. Ruby is most easily installed by utilizing this installer.

Download the most recent version installer (Ruby 2.0.0-p481 at the time of writing).
Run the installer and you should come to an "options" page.

Set your Ruby installation path to C:\Ruby and then make sure to check the box labeled "Add Ruby executables to your PATH".

This will automate the steps that we've been doing manually thus far.

Ensure that installation was complete by opening a new Command Prompt and typing:

ruby -v

It should return something to this effect:

ruby 2.0.0p481 {build-date} {bit version}

Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation.

Android SDK

Next, we'll need the Android SDK. You can download it by visiting the Android SDK site.

  1. Click "Other Download Options" and select the recommended .exe under "SDK Tools Only".

  2. Agree to the terms and conditions and Download your file.

  3. Run the executable. First, it will verify Java installation, which should pass based on the results of our above installation.

  4. Next, select what scope of installation you desire.

  5. Set the destination folder to be C:\Android, click "Next", and then "Install".

  6. Upon successful installation, run the Android SDK manager. You'll need to install the pre-checked boxes. These things include base tools for the Android build tools and a few of the latest platforms.

  7. Click the "Install x packages" and wait for the download to complete.

Note: You can download the ADT bundle instead, though it includes a lot of extras that may not be necessary from case to case.

As per usual, we will need to create the ANDROID_HOME Environment Variable.

  1. Click the "New" button under "System variables"
  2. Enter "ANDROID_HOME" for the variable name and "C:\Android" for the variable value.
  3. Click "Ok"

Lastly, you will need to append the ANDROID_HOME Environment Variable.

  1. Find "Path" under "System variables"
  2. Click edit (on windows 10 you must also click "Edit text") and add ";%ANDROID_HOME%\tools;%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools" to the end of the current variable's value.
  3. Click "Ok" to accept the changes and then "Ok" again to save

You can test that the path is setup properly by issuing the "android" command from your terminal. If the SDK tools are properly installed, the Android manager should launch.

Note: Please remember this option will only affect new Command Prompt windows and not existing ones. Close any windows previously open to ensure installation.

NodeJS

The last dependency to install is NodeJS. Start by downloading the NodeJS installer.

  1. Begin the Node.js installer and click "Next"
  2. Accept the License Agreement and click "Next"
  3. Select C:\nodejs as the installation direction and proceed until you can click "Install"

Node automatically adds itself to the system path, but you DO need to restart your machine for all of the new mapping to resolve.

After restarting your machine, open your Command Prompt and test the NodeJS install by issuing the following command:

node -v

The above command should return something along the lines of:

"v0.10.3x".

Cordova / PhoneGap

Now that NodeJS is installed, you can easily add Cordova and/or PhoneGap to your machine.
This should be the easiest step so far. Simply open your Command Prompt and run the following command(s).

Cordova

npm install -g cordova

PhoneGap

npm install -g phonegap

You can verify installation by performing the following commands:

cordova -v
phonegap -v

Both should return a version number if they are properly installed. Workflow in Sencha Architect

After opening your existing project in Sencha Architect 3.x, you can get started by hitting the "save" button. This will get your project initialized and set up with Sencha Cmd.

After the project has been successfully saved, open your Command Prompt.

Navigate to the project folder that was just saved and run the following command (APP_ID and APP_NAME arguments optional).

sencha phonegap init com.mycompany.MyApp MyApp

or

sencha cordova init com.mycompany.MyApp MyApp

You should now see a phonegap (or cordova) directory in the project folder after the above command completes. Returning to Sencha Architect and you should see two new build options:

  • Native Build
  • Native Build & Emulate

You should also see a block for PhoneGap or Cordova in your project's app.json file. app.json is located at the root of your project. This is where you can set the platform for which you are building.

PhoneGap

"native": {
   "packager": "phonegap",
   "cordova": {
      "config": {
         "id": "com.domain.MyApp",
         "name": "MyApp",
         "platform": "android"
      }
   }
}

Cordova

"native": {
   "packager": "cordova",
   "cordova": {
      "config": {
         "id": "com.domain.MyApp",
         "name": "MyApp",
         "platforms": "android"
      }
   }
}

Note: Native Build & Emulate takes a very long time to complete for Android builds on Windows due to the the Android tools and emulator.

Conclusion

Your Windows 8.x/10 environment should now be prepared to build native Android builds on Sencha Touch with Sencha Architect 3.x. For more information, please refer to the PhoneGap and Cordova guide.

Architect 3