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

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.

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:

Create an Ext JS 4.1.x/4.2.x project

Add a panel to your project

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.

Add a Process Config function to the panel

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:

Create a Touch project

Add a button to your project

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.