Версия через конфигуратор

Блоки с разной вёрсткой через MIGX: версия конфигуратора¶

MIGX Configurator CMP позволяет создавать переключаемые formtabs. Этот урок показывает, как это сделать. Описаны только отличия от использованной ранее версии.

MIGX TV¶

Создайте новую TV.

Общая информация¶

Name¶

MultiColumn

Параметры ввода¶

Input-type¶

migx

Configurations¶

layout_1

Конфигурации MIGX¶

Создайте три конфигурации MIGX в MIGX Configurator CMP¶

layout_1¶

Name: layout_1 unique MIGX ID: layout_1

layout_2¶

Name: layout_2 unique MIGX ID: layout_2

layout_3¶

Name: layout_3 unique MIGX ID: layout_3

Добавьте Formtabs и Columns¶

Откройте каждую конфигурацию через «edit raw».

layout_1¶

Formtabs¶

[{
  "caption": "Row Format",
  "fields": [{
    "field": "fake",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_2_image",
    "caption": "Image",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_2_headline",
    "caption": "Headline",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_2_content",
    "caption": "Content",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_3_image",
    "caption": "Image",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_3_headline",
    "caption": "Headline",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_3_content",
    "caption": "Content",
    "inputTVtype": "hidden"
  }]
}, {
  "caption": "First",
  "fields": [{
    "field": "cell_1_image",
    "caption": "Image",
    "inputTVtype": "image"
  }, {
    "field": "cell_1_headline",
    "caption": "Headline"
  }, {
    "field": "cell_1_content",
    "caption": "Content",
    "inputTVtype": "richtext"
  }]
}]

В Multiple Formtabs выберите:

layout_1,layout_2,layout_3

Columns¶

[{
  "header": "Row Format",
  "width": "30",
  "sortable": "true",
  "dataIndex": "MIGX_formname"
}, {
  "header": "First",
  "width": "160",
  "sortable": "false",
  "dataIndex": "cell_1_image",
  "renderer": "this.renderImage"
}, {
  "header": "Second",
  "width": "160",
  "sortable": "false",
  "dataIndex": "cell_2_image",
  "renderer": "this.renderImage"
}, {
  "header": "Third",
  "width": "160",
  "sortable": "false",
  "dataIndex": "cell_3_image",
  "renderer": "this.renderImage"
}]

layout_2¶

Formtabs¶

[{
  "caption": "Row Format",
  "fields": [{
    "field": "fake",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_3_image",
    "caption": "Image",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_3_headline",
    "caption": "Headline",
    "inputTVtype": "hidden"
  }, {
    "field": "cell_3_content",
    "caption": "Content",
    "inputTVtype": "hidden"
  }]
}, {
  "caption": "First",
  "fields": [{
    "field": "cell_1_image",
    "caption": "Image",
    "inputTVtype": "image"
  }, {
    "field": "cell_1_headline",
    "caption": "Headline"
  }, {
    "field": "cell_1_content",
    "caption": "Content",
    "inputTVtype": "richtext"
  }]
}, {
  "caption": "Second",
  "fields": [{
    "field": "cell_2_image",
    "caption": "Image",
    "inputTVtype": "image"
  }, {
    "field": "cell_2_headline",
    "caption": "Headline"
  }, {
    "field": "cell_2_content",
    "caption": "Content",
    "inputTVtype": "richtext"
  }]
}]

layout_3¶

Formtabs¶

[{
  "caption": "Row Format",
  "fields": [{
    "field": "fake",
    "inputTVtype": "hidden"
  }]
}, {
  "caption": "First",
  "fields": [{
    "field": "cell_1_image",
    "caption": "Image",
    "inputTVtype": "image"
  }, {
    "field": "cell_1_headline",
    "caption": "Headline"
  }, {
    "field": "cell_1_content",
    "caption": "Content",
    "inputTVtype": "richtext"
  }]
}, {
  "caption": "Second",
  "fields": [{
    "field": "cell_2_image",
    "caption": "Image",
    "inputTVtype": "image"
  }, {
    "field": "cell_2_headline",
    "caption": "Headline"
  }, {
    "field": "cell_2_content",
    "caption": "Content",
    "inputTVtype": "richtext"
  }]
}, {
  "caption": "Third",
  "fields": [{
    "field": "cell_3_image",
    "caption": "Image",
    "inputTVtype": "image"
  }, {
    "field": "cell_3_headline",
    "caption": "Headline"
  }, {
    "field": "cell_3_content",
    "caption": "Content",
    "inputTVtype": "richtext"
  }]
}]

Во всех наборах formtabs должны быть одни и те же имена полей. Неиспользуемые поля прячьте в hidden. Иначе при переключении formtabs значения пропадут.