Architect 2 Sencha Docs

Config Panel

Use the Config panel at the bottom right of the Architect window to control the appearance and/or behavior of the item currently selected in the Inspector or the Canvas. This guide provides general information about the Config panel. Consult the guides that cover the Application node, controllers, Stores & Models, views, and resources for specifics about configuring those parts of an application.

What's in the Config panel

Select any part of an application -- the Application node, Controllers, Views, Stores, Models, or Resources -- in either the Inspector or the Canvas. The Config panel displays the configurations for that part of your application, grouped according to the subclass where the configuration is defined. Click the name of the grouping to open or close the list of available configurations.

Here is the Config panel for the DetailPanel view in the City Bars example application:

Searching for Configs

The Filter or Quick Value Set field near the top of the panel makes it easy to find the configuration you want to set: type the setting you want to edit and the panel displays only the one that matches your filter. You can search for multiple settings in one operation by stringing the settings together with a pipe character. For example, searching for "name|fieldLabel" gives you the "name" and the "fieldLabel" settings.

Filter field controls

When you type something into the filter field, a lock and an (X) icon appear. The lock allows you to lock in a filter so it continues to filter when you move between instances in the inspector. Use the X or Clear icon to clear both the lock and the filter value.

Documentation

The name of the class you are configuring is listed at the top of the Config panel. To the right, it lists the type of class it is. Position the cursor over the ? icon to the right of the classname, then click the See Class Documentation to read configuration details from the framework API documentation.

Basic and Advanced Mode Toggle

The basic/advanced mode toggle at the top right of the Config panel lets you view either basic or advanced configs. Selecting the icon on the left (with fewer horizontal lines) displays basic (commonly used) configs. Selecting the icon on the right displays advanced (all) configs.

Note that advanced configurations not shown in basic mode are available when you search for that specific configuration by entering its name in the Filter or Quick Value Set field just below the classname.

Setting Configs

All configs for the selected class are listed in the Config panel. Click on the right hand side (in the value column) to change the value.

A variety of editors can be used, depending on the the type of configuration being set:

  • Boolean: Check or uncheck the box to activate or deactivate the config..

  • String: Enter text into blank value fields or value fields that already contain text.

  • Object: Click the edit icon to open the code editor, which lets your create or edit an object.

  • Array: Enter values one below another. Drag items to reorder them in the array.

  • Options: Select from a drop-down list.

  • Class: Click the add button ("+") and choose a class. After the class has been added, click the arrow to configure it.

  • Template: Click the add button. After adding the template, click the arrow to configure it in the Config grid and edit it with the code editor.

Configs that have been set appear with a blue glow to the left-hand side of the config name. Quickly looking down the left hand side of the Config panel, you can see which configs have been set and which have not. If the Config panel shows a blue glow on the left side of a header, at least one config has been set for that header.

Clicking the X on the right hand side of the config unsets whatever value has previously been assigned to it, whether you set it or it was set automatically by Architect.

Changing Config Types

Some configs allow for multiple types. For example, the scrollable config for Containers in Sencha Touch accepts a boolean, string, or object. In Architect, you can specify the type of a config using a drop-down list next to the config name. Any config type you select is saved for that instance and persists across sessions.

Here are a few examples.

A configuration that allows multiple types:

Switching the type of a configuration:

A configuration set to a different type:

Custom Configurations

You can define your own custom configurations and add them to the Config panel. Do this by typing the name of the custom configuration in the Filter or Quick Value Set field and clicking Add. The new configuration is displayed in the Custom Properties category in the panel.

Type myConfig and click Add to add a custom configuration to your class.

By default, a custom configuration is added as a string.

To change configuration type, click the type drop-down list on the left hand side of the config name.

If you know the type of a configuration prior to adding it, you can provide hinting to Sencha Architect by delimiting the key and value with a : (similar to how you would in object literal or JSON notation) before clicking Add.

To delete a custom config, right click on the config in the configuration grid and click Delete {configName}.

Template Configs

Templates in Architect refer to configurations that accept an XTemplate.

Template configs look like the following, where renderTpl is an example of a template config that has no value and tpl is an example of a template config with a value.

Note that the Inspector displays template(s) you add as children, and that is the way you configure them.

Editing a Template

Double-click on a template in the Inspector to open the code editor, which you use to enter the HTML for the template. You can also add member functions to your template.

Template Member Functions

With a template selected, note that the Config panel includes a Functions config. Clicking the (+) adds a new function. These functions become member functions and can be called from the template's HTML.

Here's an example showing member functions:

Ext.create('Ext.XTemplate', 
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
        '<tpl if="this.isGirl(name)">',
            '<p>Girl: {name} - {age}</p>',
            '<tpl else>',
            '<p>Boy: {name} - {age}</p>',
            '</tpl>',
            '<tpl if="this.isBaby(age)">',
            '<p>{name} is a baby!</p>',
            '</tpl>',
        '</tpl></p>',
        {
            // XTemplate configuration:
            disableFormats: true,
            // member functions:
            isGirl: function(name){
                return name == 'Sara Grace';
                },
            isBaby: function(age){
               return age < 1;
            }
        }
    );

To create this in Architect, do the following:

  • Add the template config
  • Edit the template by opening the code editor and entering the following:

    Name: {name}

    Kids:

    Girl: {name} - {age}

    Boy: {name} - {age}

    {name} is a baby!

  • Add two Functions to the template (isGirl and isBaby)

  • Set the disableFormats config for template to true

Using Variables with Configs

Setting a config to a variable (such as current time/date) is improved in Sencha Architect. This solves two issues in earlier releases:

  • JavaScript Expressions such as variables, function calls, and class construction could not be configured in the configuration panel. For example new Date(), myVariableName or myFunction() are each encoded as a string and may not work as you expect them to.
  • A configuration could not be set to the value null.

This guide shows you how to override configs in both Ext JS and Sencha Touch.

Ext JS 4.1.x/4.2.x

Here is how you would set a panel's title to the current time:

  1. Create an Ext JS 4.1.x/4.2.x project
  2. Add a panel to your project
  3. Set the title of the panel if you wish to have a default title. This title will be the title that is shown in the canvas.

  4. Add a Process Config function to the panel

  5. In the function, override the default with the current time

    config.title = Ext.Date.format(new Date(), 'G:i:s');
    

When you run the project, the panel will show the current time

Note: A Process Config function can be added to Views, Controllers, Stores, and Models of any depth.

Sencha Touch

In Sencha Touch, here is how to set a button's text to the current time:

  1. Create a Touch project
  2. Add a button to your project
  3. Set the button's text if you wish to have a default text. This text will be the text that is shown in the canvas.

  4. Add an initialize function to the button

  5. In the function, override the default with the current time

    this.setConfig({
        text: Ext.Date.format(new Date(), 'G:i:s')
    });
    
    this.callParent();
    

This method works when modifying a config that is on the top level component, but what about its children? If the button were a child of a panel, this is how the panel's initialize() would look:

// get the child
var button = this.getComponent('customButton');

button.setConfig({
    text: Ext.Date.format(new Date(), 'G:i:s')
});

this.callParent();

When you run the project, the button in the panel shows the current time

Note: The initialize() function can be added to top level components and should invoke callParent()

Note that, when using this feature, any logic in the process's config/initialize function does not show up in the Canvas.