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 4.2


top

Modern Application

In this walkthrough, we will build an Employee Directory application. This guide will provide a basic understanding of how to use Architect 4.0+ to build an Ext JS Modern app.

Employee Directory App

Step 1: Start Architect

To begin, you will download Architect and create a blank project.

  1. Download Architect from here

  2. Start Architect on your computer and, if necessary, register or continue a trial subscription

  3. In the initial Architect dialog click New Project

  4. Choose your framework: Ext JS 6.0.x Modern at the top-right of the "New Project" window

  5. Choose a project format: Click the Blank Project and click Create. This will create the empty application structure to which we’ll add our components and application logic to build our Employee Directory.

Step 2: Add Tab Panel and Save Project

The navigational framework of our app is created using a tab panel allowing us to navigate between an employee directory listing and a company information tab.

  1. In the Toolbox panel on the right-hand side of Architect, search for "tab panel".
    Drag the “Tab Panel” component from the Containers group on to the device canvas.

  2. Click on the "Save" button in the toolbar top-left and click “Save” from the menu.

    1. Provide a Save Path where the Architect application will be saved to.

    2. Enter a Project Name. This will also be the directory for your app within the save path. Use "EmployeeDirectory" for the purpose of the walkthrough.

    3. Type an App Name. This will be the namespace used within the application for all of its output class files. Input "EmpDir" for the purpose of the walkthrough.

    4. Click Save

      • Note: Do not to save your project within another project directory (or other Cmd created workspace)
  3. At the next prompt click No when asked " Would you like to scan your project for references to the old application name?"

  4. To preview the app’s progress, click on the "Preview App" button Preview Button to the right of the Save button and click the Preview button. Your default browser will open with a tab showing the app’s progress thus far (our tab panel we dragged to the device canvas).

Step 3: Update Tab Panel with Only 2 Tabs

In this section you will modify the tab panel’s default view to contain only the components you’ll need for your final app.

  1. Select MyTabPanel from the Project Inspector pane

  2. In the lower-right side of the Toolbox pane is the configs pane used to modify the configuration of views and other classes with your app. Search for "name" in the Filter Configs… field of the configs pane.

  3. Change the value of the userClassName config from "MyTabPanel" to “Main”

  4. Next, delete Tab 3

  5. Search for "grid" in the Toolbox pane

  6. Drag an instance of the "Grid" component above Tab 1 in the Project Inspector pane to add the grid to the tab panel as the first tab

  7. Select Tab 1 and in the configs pane search for "title". Update the title to “Employee Directory”

    • Alternatively, you can rename the tab by double-clicking the text of the tab in the device canvas of the main Design pane and entering the new text / title.
  8. For the "Employee Directory" tab, in configs pane search input “iconCls” and click Add on the right-hand side of the filter field to add “iconCls” as a custom configuration. Set the value of “iconCls” to “x-fa fa-users”. This will add an icon to the tab using the Ext JS theme’s icon set.

  9. Select Tab 2 in the Project Inspector pane. Update the title to "About Sencha"

  10. For the "About Sencha" tab, add the custom “iconCls” config and set its value to “x-fa fa-info-circle”.

  11. Preview the project to view your updates outside of Architect.

    • If you did not save before clicking the Preview button you will be prompted to save.

Step 4: Add "About Sencha" Panel in Tab 2

Here you’ll add the content and styling of the company information panel.

  1. With the "About Sencha" tab selected in the Project Inspector pane, search for “html” in config panel. Change html to the following:

    • <h1>About Sencha</h1><br/>More than 10,000 customers and 60% of the Fortune 100 rely on Sencha solutions to deliver innovative applications that drive their businesses. With a longstanding commitment to web technologies, Sencha dramatically reduces the cost and complexity of developing and delivering enterprise applications across multiple device types.<br/><br/><h2>Create feature-rich HTML5 applications using JavaScript</h2><br/>Sencha Ext JS is the most comprehensive MVC/MVVM JavaScript framework for building feature-rich, cross-platform web applications targeting desktops, tablets, and smartphones. Ext JS leverages HTML5 features on modern browsers while maintaining compatibility and functionality for legacy browsers.<br/><br/>Ext JS features hundreds of high-performance UI widgets that are meticulously designed to fit the needs of the simplest as well as the most complex web applications. Ext JS templates and layout manager give you full control over your display irrespective of devices and screen sizes. An advanced charting package allows you to visualize large quantities of data. The framework includes a robust data package that can consume data from any backend data source. Ext JS also offers several out-of-the-box themes, and complete theming support that lets you build applications that reflect your brand. It also includes an accessibility package (ARIA) to help with Section 508 compliance.
  2. Add padding to our "About Sencha" tab by searching for “padding” and setting the “padding” config value to 10

  3. Click on Save

  4. Preview the app

Step 5: Add Model

Before stubbing in data for the employee directory you’ll first create a data model with fields describing the data set to be consumed by the grid / directory.

  1. In the Project Inspector pane, click the "+" button and select Model from the drop down menu

  2. Search for "name" in config panel and change the “userClassName” config from “MyModel” to “Employee”

  3. From the config panel, search "fields".

  4. Click the "+" button on the right-hand side of the fields config.

  5. Enter "firstName, lastName, officeLocation, phoneNumber" and click Finish

  6. Click Save

Step 6: Add Store

Next, you’ll add a data store to your project that will furnish data to the employee directory view. Architect will generate mock data allowing you to further visualize how your application will work once populated with employee data.

  1. From the Project Inspector pane, click the "+" button and choose Store > Json Store from the drop down menu

  2. Search for "name" in config panel and change the “userClassName” from “MyJsonStore” to “Employees”

  3. Right click on the Employees store item in the Project Inspector pane and select Generate Mock Data

  4. In the Generate Mock Data dialog window choose "Employee" for the Select Model field and click the Generate button

    • Note: When not generating mock data for your app you will want to associate your Employee model to your Employees store by filtering for "model" on the store config and selecting the “Employee” model from the “model” config’s drop down option.
  5. Click Save

Step 7: Set Up the Employee Directory Grid

The employee directory grid has been added as a tab, but not yet configured to display the employee data from the Employees data store. In the following steps you will configure the presentation of the employee grid as well as associate each column to its corresponding field in the data store.

  1. Select the Employee Directory grid item found in the Project Inspector pane found at Application > Views > Main > Employee Directory

  2. Search for "columns" in the configs panel and delete all entries on the “Columns” config except for String by clicking on the “X” icon next to each entry

  3. On the "Columns" config add two columns by clicking on the “+” button on the “Columns” config line and selecting “Column” from the drop down menu

  4. In the config pane search for "store" and select “Employees” from the store config’s drop down option

  5. Select the "String" column from the Project Inspector pane under the Employee Directory grid item

  6. In the config pane search for "text" and change the value from “String” to “First Name”

  7. Search for the "dataIndex" config and select “firstName” from the dataIndex config’s drop down option

  8. Select "MyColumn1" from the Project Inspector pane

  9. In the config panel search for "text" and change the value from “MyColumn1” to “Last Name”

  10. Search for the "dataIndex" config and select “lastName” for the dataIndex config

  11. Select "MyColumn2" from the Project Inspector pane

  12. In the config panel search for "text" and change the value from “MyColumn2” to “Phone Number”

  13. Search for the "dataIndex" config and select “phoneNumber” for the dataIndex config

  14. For each column search for the "width" config and set the value to 120

  15. Preview the app

Step 8: Add Form Panel

With the employee grid finished we’ll now create a form used to view and modify the details of an employee record.

  1. In the Toolbox pane search for "form" and drag a “Form Panel” instance on to the Views node in the Project Inspector pane

  2. Search for "name" in config panel and change “userClassName” from “MyFormPanel” to “UpdateRecordForm”

  3. Search for "title" and change it from “My Form” to “Update Record”

  4. Search for the "modal" and select (check) it

  5. Search for "centered" and select it

  6. Search for "text field" in the Toolbox pane

  7. Drag a "Text Field" component on to the device canvas and drop it on the Update Record form panel. Do this three more times so that there is a total of four text fields on the “Update Record”.

  8. Select the first text field (from either the design view or within the Project Inspector pane) and search for the "label" config. Change the label from “Field” to “First Name”. Do the same for each text field using the labels: First Name, Last Name, Office Location, and Phone Number.

  9. Search for "toolbar" in the Toolbox pane and drag a Toolbar on to the Fom Panel

  10. With the toolbar selected search for the "docked" config and set its value to “bottom” using the drop down

  11. Click Save

Step 9: Add Buttons to Form Panel

Next, you’ll add buttons to the Update Record form that will either save edits back to the employee record or cancel the edit and close the form (we’ll save the binding of the record to the form itself for a later step).

  1. Search for "button" in the Toolbox pane. Drag a “Button” instance and drop it on top of the toolbar in the device canvas.

  2. Search for the "text" config and change the value from “MyButton” to “Submit”

  3. Search for the "iconCls" config and enter a value of “x-fa fa-check”

  4. In the config search input "event" and click the “+” next to View Controller Event Bindings.

  5. Enter "tap" and click the Finish button. This will add an “onButtonTap tap” item under View Controller Event Bindings where “onButtonTap” is the name of the method to execute when the button is tapped.

  6. Click the "->" button on the “onButtonTap” item. Change the “fn” value from “onButtonTap” to “submitUpdate”. This will add the “submitUpdate” method to the “Update Form”s View Controller.

  7. In the Project Inspector pane double-click on the submitUpdate item under the UpdateRecordFormViewController node. This will open up the code view for the submitUpdate method (note that the **Design view has now switched over to the Code** view in the main pane). Enter the following code for the submitUpdate method:

     var view = this.getView(),
         record = view.getRecord();
     view.destroy();
     record.commit();
    
  8. Press the "checkmark" button top-right of the code editor to commit the code

  9. Switch back over to the design view using the Design toggle button top-right of the center pane

  10. Drag another "Button" instance and drop it on top of the toolbar in the device canvas

  11. Search for the "text" config and change the value from “MyButton1” to “Cancel”

  12. Search for the "iconCls" config and enter a value of “x-fa fa-close”

  13. In the config search input "event" and click the “+” next to View Controller Event Bindings and.

  14. Enter "tap" and click the Finish button.

  15. Click the "->" button on the “onButtonTap” item. Change the “fn” value from “onButtonTap” to “cancelUpdate”.

  16. In the Project Inspector pane double-click on the cancelUpdate item under the UpdateRecordFormViewController node. This will open up the code view for the cancelUpdate method. Enter the following code for the cancelUpdate method:

    var view = this.getView(),
        record = view.getRecord();
    view.destroy();
    record.reject();
    
  17. Click the "checkmark" button top-right of the code editor to commit the code

  18. Click Save

Step 10: Show Form Panel from the Employee Grid

Next, you’ll add the logic used to show the Update Record form when a grid row is clicked / tapped.

  1. In the Project Inspector pane select grid under Employee Directory (at Application > Views > Main > Employee Directory).

  2. In the config search input "event" and click the “+” next to View Controller Event Bindings and.

  3. Enter "childtap" and click the Finish button.

  4. Click the "->" button on the “onGridChildTap” item. Change the “fn” value from “onGridChildTap” to “onPopupForm”.

  5. In the Project Inspector pane double-click on the onPopupForm item under the MyTabPanelViewController node. This will open up the code view for the onPopupForm method. Enter the following code for the cancelUpdate method:

     Ext.Viewport.add({
         xtype: 'updaterecordform',
         width: 400,
         record: record,
         viewModel : {
             data: {
                 employee: record
             }
         }
     });
    
  6. Click the "checkmark" button top-right of the code editor to commit the code

  7. Preview the app. Note that clicking / tapping a row of the grid will show the Update Record form panel.

Step 11: Bind Data in Popup Form to Grid

Finally, let’s set up the binding of the employee record to the form fields used to edit the record. The binding uses the viewModel configuration of the updaterecordform in the previous section. The record is associated to the view model data with a key of "employee". Each named field on the employee record will be used in the following steps when binding the value of the model’s field to that of the coordinating text field.

  1. Select the First Name text field in the Project Inspector pane at Application > Views > UpdateRecordForm > MyTextField.

  2. Search for the "bind" config and click the Edit button Edit Config Button

  3. In the Code view enter the value of: '{employee.firstName}' and click the "checkmark" button top-right of the code editor to commit the value

  4. Select the Last Name text field (MyTextField1), search for the "bind" config, and set the value to: '{employee.lastName}'

  5. Select the Employee Location text field (MyTextField2), search for the "bind" config, and set the value to: '{employee.officeLocation}'

  6. Select the Phone Number text field (MyTextField3), search for the "bind" config, and set the value to: '{employee.phoneNumber}'

  7. Preview the app. When a grid row is clicked / tapped its record will be loaded to the popup form panel. Edits can now be made to the four field values with the Submit button committing the edit to the underlying record and Cancel discarding the edit.

Architect 4.2