3.1.5. ExtComposer#

Это внешний компонент, предназначенный для размещением фреймов, связанных отношением мастер-деталь. Клиентский код компоновщика должен создавать HTML-элементы для каждого детального фрейма, которые идентифицируются по авто-формируемому ключу key.

See also

  1. Метаданные ExtComposer

  2. Core-интерфейс CoreExtComposer

  3. JS-api ExtComposer

Шаблон серверного кода внешнего компоновщика#
  class Gs3_ExtComposerExampleAbi extends ExtComposerAbi {

  }
Шаблон клиентского кода внешнего компоновщика#
 1class MyComposer {
 2    constructor(name) {
 3        this.name = name;
 4        this.isAttached = false;
 5    }
 6
 7    init(extContext) {
 8        this.extContext = extContext;
 9        this.unsubscribeNodeChanges = this.extContext.extController.subscribeNodeChanges({
10            onSubscribe(rootNode) {},
11            beforeVisitModel() {},
12            beforeVisitNode(pNode) {},
13            beforeAddToParent(pNode, parentNode) {},
14            afterLoadNode(pNode) {},
15            afterVisitNode(pNode) {},
16            beforeCleanNode(pNode, parentNode) {},
17            afterVisitModel() {},
18            beforeConsignmentVersionChange() {},
19            afterConsignmentVersionChange() {}
20        });
21    }
22
23    destroy() {
24        this.unsubscribeNodeChanges();
25        this.extContext = null;
26    }
27
28    attach(parent) {
29        this.composerParent = parent;
30        // Здесь создаём в `composerParent` необходимые HTML-элементы.
31        this.isAttached = true;
32    }
33
34    detach() {
35        this.isAttached = false;
36        while (this.composerParent.lastChild) this.composerParent.removeChild(this.composerParent.lastChild);
37        this.composerParent = null;
38    }
39
40    beforeChildrenChange() {
41    }
42
43    addChild(key, docker) {
44    }
45
46    removeChild(key) {
47    }
48
49    afterChildrenChange() {
50    }
51
52    doLayout() {
53    }
54}
Пример кода Avm#
 1  <representation name="ExtComposer">
 2      <layout>
 3          <extComposer
 4                  name="gs3/ExtComposerExample"
 5                  backendClass="ru.bitec.app.gs3.test.extctrl.Gs3_ExtComposerExampleAbi"
 6                  frontendUri="gs3/extctrl/composer.js">
 7              <frame>
 8                  <grid/>
 9              </frame>
10          </extComposer>
11      </layout>
12  </representation>

3.1.5.1. Список детальных выборок#

Возможны статическое и динамическое определение списка детальных выборок.

3.1.5.1.1. Статический список#

В Avm файле определяется перечень детальных выборок.

Статическое определение списка детальных выборок#
 1  <representation name="ExtComposerStaticItems" editMode="edit" caption="Тест ExtComposer'a">
 2      <layout>
 3          <extComposer
 4                  name="gs3/ExtComposerExample"
 5                  backendClass="ru.bitec.app.gs3.test.extctrl.Gs3_ExtComposerExampleAbi"
 6                  frontendUri="ru/bitec/app/gs3/test/extctrl/web/composer.js">
 7              <frame>
 8                  <grid/>
 9              </frame>
10              <details>
11                  <detail selection="gtk-Gs3_ExtControlExampleAvi" representation="ExtControl" name="item-1"/>
12                  <detail selection="gtk-ru.bitec.app.btk.Btk_NotificationAvi" representation="Head" name="item-2"/>
13              </details>
14          </extComposer>
15      </layout>
16  </representation>

3.1.5.1.2. Динамический список#

В Avm файле указываются имя и отображение выборки, которая содержит записи с именами детальных выборок.

Динамическое определение списка детальных выборок#
 1  <representation name="ExtComposerSelectionItems" editMode="edit" caption="Тест ExtComposer'a">
 2      <layout>
 3          <extComposer
 4                  name="gs3/ExtComposerExample"
 5                  backendClass="ru.bitec.app.gs3.test.extctrl.Gs3_ExtComposerExampleAbi"
 6                  frontendUri="ru/bitec/app/gs3/test/extctrl/web/composer.js">
 7              <frame>
 8                  <grid/>
 9              </frame>
10              <details selection="gtk-Gs3_ExtControlExample" representation="ExtItemSource"/>
11          </extComposer>
12      </layout>
13  </representation>
Пример отображения выборки со списком деталей#
 1  trait ExtItemSource extends Default {
 2    override protected def onRefresh: Recs = {
 3        List(
 4          ExtItemRec(1, "item-1", "gtk-Gs3_ExtControlExample", "ExtControl", 1, ""),
 5          ExtItemRec(2, "item-2", "gtk-ru.bitec.app.btk.Btk_Notification", "Head", 1, ""),
 6        )
 7    }
 8  }
 9
10  case class ExtItemRec(
11                         var ID: Int,
12                         var SNAME: String,
13                         var SSELECTIONNAME: String,
14                         var SREPRESENTATIONNAME: String,
15                         var NVISIBLE: Int,
16                         var JSONPARAMS: String,
17                       )