XTemplate Syntax in ExtJS Settings

XTemplates in ExtJS settings allow you to create dynamic content using placeholders and simple expressions. These placeholders refer to underlying data and are replaced at runtime with actual values, depending on the specific context.

Basic Principle

XTemplates work with a data context that provides the values for the placeholders.
Placeholders enclosed in curly braces {} reference fields or properties of this data.
At runtime, the placeholders are replaced with the corresponding values from the data context.

Data Context

The data context can come from various sources:

Properties of the global ViewModel
User-defined JavaScript objects

Basic Syntax

{feldName}: Displays the value of a field
{[JavaScript-Ausdruck]}: Executes a simple JavaScript expression

Example

Here is a simple example of an XTemplate string:

{
  "Benutzername": "Max",
  "Vorname": "Maximilian",
  "Nachname": "Mustermann"
}

Hello {First Name} {Last Name}!
Today is {[Ext.Date.format(new Date(), 'd.m.Y')]}.

In this example, {Vorname} {Nachname} is replaced with the actual names, and the current date is displayed in the DD.MM.YYYY format.

The XTemplate always requires a corresponding data object that contains the properties used in the template. If a referenced property is missing from the data object, it is displayed as an empty string.

Context-Dependent Values

Depending on the settings, different values may be available. The global ViewModel, which provides application-wide data, is frequently accessed.

Example using the global ViewModel, as it might be used in User Account Menu:

Welcome back, {global.userSession.loginName}!

For more information on using the global ViewModel, see the global ViewModel documentation.

Further Information

For advanced usage, including loops and conditions, please consult the official ExtJS documentation on XTemplate.