CoreMedia Studio Manual, Version 7.5.45-10
5.1. Ext JS Primer | 5.1.2. Declarative UI (Ext JSON)

Ext JS builds on common JSON notation to describe the application's component tree declaratively. The root of an Ext JS component tree is a viewport component. Its constructor takes a JSON object that declares the UI's component structure, and initializes it. CoreMedia Studio's top-level component tree is shown below:

{
  id: com.coremedia.cms.editor.sdk.desktop.EditorMainView.ID,
  ctCls: "main-view",
  layout: {
    align: "stretch",
    type: "hbox"
  },
  items: [
    {
      id: "favorites-toolbar",
      itemId: "favorites-toolbar",
      width: 100,
      xtype: com.coremedia.cms.editor.sdk.config.favoritesToolbar.xtype
    },
    {
      id: "desktop",
      flex: 1.0,
      xtype: com.coremedia.cms.editor.sdk.config.desktop.xtype
    },
    {
      width: 34,
      id: "actions-toolbar",
      xtype: com.coremedia.cms.editor.sdk.config.actionsToolbar.xtype
    }
  ]
}

This object defines the layout and the basic items of the application (or more specifically, the application's view port). The main items are the favoritesToolbar, the desktop and the actionsToolbar. When this configuration object is loaded, instances of the child components identified by the following xtypes are instantiated.

The configuration of these components is specified by the sibling attributes of the respective xtype attribute (the favorites toolbar, for example, has width 100), and is merged with the component's default configuration.