Контрол внутри контрола?

Всем доброго времени суток.

Версия 7.10.

Продолжаем постигать тайны разработки.

На этот раз задача - вызывать контрол внутри пользовательского контрола.

Есть некоторый контрол, занаследованный от GridLayout:

Ext.ns("Terrasoft");
/**
 * @class Terrasoft.controls.UsrTestSchedule
 */

Ext.define("Terrasoft.controls.UsrTestSchedule", {
        extend: "Terrasoft.GridLayout",
        alternateClassName: "Terrasoft.UsrTestSchedule",
});

Есть его генератор:

define("UsrTestScheduleGenerator", ["UsrTestScheduleGeneratorV2Resources", "terrasoft", "ext-base", "UsrTestSchedule"],
        function(resources, Terrasoft) {
                var UsrTestScheduleGenerator = Ext.define("Terrasoft.configuration.UsrTestScheduleGenerator", {
                        extend: "Terrasoft.ViewGenerator",
                        alternateClassName: "Terrasoft.UsrTestScheduleGenerator",
                       
                        item1: function(){
                                return Ext.create("Terrasoft.Label", {
                                                                        "className": "Terrasoft.Label",
                                                                        "itemType": Terrasoft.ViewItemType.LABEL,
                                                                        "caption": "A Panel",
                                                                        "visible": true
                                });
                        },
                       
                        generateUsrTestSchedule: function(config) {
                                var myItems = [
                                                {       "row": 0,
                                                        "rowSpan": 1,
                                                        "column": 0,
                                                        "colSpan": 12,
                                                        "item": this.item1
                                                },
                                                {       "row": 0,
                                                        "rowSpan": 1,
                                                        "column": 12,
                                                        "colSpan": 12,
                                                        "item": {
                                                                "className": "Terrasoft.Label",
                                                                "name": "label2",
                                                                "itemType": Terrasoft.ViewItemType.LABEL,
                                                                "caption": "A panel 2",
                                                                "visible": true,
                                                        }
                                                }
                                        ];
                               
                                var UsrTestScheduleConfig = {
                                        "className": "Terrasoft.UsrTestSchedule",
                                        "id" : "grid-layout-007",
                                        "selectors": { wrapEl: "#grid-layout-007"},
                                        "items": myItems,
                                        "type": "tiled",
                                };
                               
                                return UsrTestScheduleConfig;
                        }
                });

                return Ext.create(UsrTestScheduleGenerator);
});

При создании ориентировались на документацию: https://academy.terrasoft.ru/jscoresdk/#!/api/Terrasoft.controls.GridLayout
и инструкцию https://community.terrasoft.ru/forum/topic/25285#comment-67717
По сути требуется вывести некоторую информацию (при этом для вывода в силу специфика используются собственные контролы, сейчас не о них) внутри набора из грид блоков.

На практике с помощью генератора, приведённого выше, в код добавляются грид блоки в полном соответствии с массивом myItems (см. скриншот), но без внутреннего содержимого, того, что по документации описывается как item: {}. Для примера решили там вывести просто текст внутри контрола Label.

Как правильно в этом случае подключить label и вывести текст? То, что item1 вынесена в функцию - одна из попыток.. не помогло.

Нравится

9 комментариев

"Смородинов Денис" написал:что по документации описывается как item: {}.

Очень странно. Я бы попробовал как-то так генерировать:

 var myItems = [
	{       
		"layout": {
			"row": 0,
			"rowSpan": 1,
			"column": 0,
			"colSpan": 12
		},
		"className": "Terrasoft.Label",
		"itemType": Terrasoft.ViewItemType.LABEL,
		"caption": "Label1",
		"visible": true
	},
	{       
		"layout": {
			"row": 0,
			"rowSpan": 1,
			"column": 12,
			"colSpan": 12
		},
		"className": "Terrasoft.Label",
		"itemType": Terrasoft.ViewItemType.LABEL,
		"caption": "Label2",
		"visible": true
	}
];

Данила, так не съедает:

user: user/7f3b869f-34f3-4f20-ab4d-7480a5fdf647
file: undefined
line: undefined
column: undefined
message: Cannot read property 'toString' of undefined
date: Mon Jun 12 2017 16:35:57 GMT+0300 (RTZ 2 (зима))
moduleId: SectionModuleV2_UsrSchedulerTest1Section
moduleName: SectionModuleV2

"Иван Тюряков" написал:Данила, так не съедает:

Потестил на демке, вот что получилось:

generateControl: function(config) {
	debugger;
	var items=[{
		"colSpan": 12,
		"column": 0,
		"row": 0,
		"item": {
			className: "Terrasoft.Container",
			id: "Button-Container",
			items: [{
				className: "Terrasoft.Button",
				style: "blue",
				caption: "TOAST",
				click: {bindTo: config.ButtonClick},
				visible: true,
				enabled: true,
				safeBind: true
			}]
		}
	}, 
	{
		"colSpan": 12,
		"column": 12,
		"row": 0,
		"item": {
			className: "Terrasoft.Container",
			id: "Label-Container",
			items: [{
				className: "Terrasoft.Label",
				caption: config.LabelCaption
			}]
		}
	}];
	var CTRLConfig = {
			"className": "Terrasoft.TmGridControl",
			"id" : "grid-layout-test",
			"selectors": { wrapEl: "#grid-layout-test"},
			"items": items,
			"layout": config.layout
		};
	return CTRLConfig;
}

В странице описываю в diff:

{
	"operation": "insert",
	"parentName": "ContactGeneralInfoBlock",
	"propertyName": "items",
	"name": "MyControl",
	"values": {
		"layout": {
			"colSpan": 12,
			"column": 0,
			"row": 2
		},
		"ButtonClick": "showTestMessage",
		"LabelCaption": "ТЕСТОВЫЙ LABEL",
		"generator": "TmGridControlGenerator.generateControl",
		"visible": true
	}
}

showTestMessage - пустой тестовый метод с дебагером.
В итоге всё нормально генерируется. У меня когнитивный диссонанс: ну вот почему нельзя в items запихивать одну и ту же структуру? Нафига они разворачивают всё в вид:

		"colSpan": 12,
		"column": 0,
		"row": 0,
		"item": {}

????? Хотя в тот же самый контейнер items надо складировать в ином виде. Блин. Ну надо же так придумать.

Данила, всё получилось тоже! Спасибо!!!

Возник следующий вопрос.

А возможно ли динамическое получение данных, и передача их в свой контрол?

То есть на странице что-то такого вида в диффе:

{
				"operation": "insert",
				"parentName": "IvanContainer",
				"name": "UsrTestSchedule",
				"propertyName": "items",
				"values": {
					"className": "Terrasoft.UsrTestSchedule",
					"generator": "UsrTestScheduleGenerator.generateControl",
					"items": {"bindTo": "contactsItems"},
					"visible": true
				}
			},

В атрибутах:

"contactsItems":{ 
				dataValueType: Terrasoft.DataValueType.COLLECTION,
				value: this.Ext.create("Terrasoft.Collection"),
				type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
			},

И в методах:

var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {
					rootSchemaName: "Contact"
				});
				esq.addColumn("Id");
				esq.addColumn("Name");
 
				esq.getEntityCollection(function (result) {
					if (!result.success) {
						console.log("UsrTestScheduleGenerator: wrapContacts: ESQ error -" + result);
						return;
					}
 
					this.set("contactsItems", result.collection);
}, this);

В генераторе соответственно:

generateControl: function(config) {
 
				var UsrTestScheduleConfig = {
					className: "Terrasoft.UsrTestSchedule",
					id: "grid-layout-007",
					selectors: { wrapEl: "#grid-layout-007"},
					items: config.items
				};
 
				return UsrTestScheduleConfig;
			}, 

В этом случае ничего не происходит. Подозреваю, что массив нельзя засунуть в виртуальную колонку. Так ли это?

"Смородинов Денис" написал:А возможно ли динамическое получение данных, и передача их в свой контрол?

Это уже что-то типа ContainerList. Там есть коллекция, которая динамически наполняется и вызывается метод onGetItemConfig при добавлении ряда.
Соответственно возможно сделать, но надо выковыривать методы/реализацию из того, что уже есть)

А я правильно понимаю, что фильтры в разделах работают также?

Если к примеру это всё подставляется на страницу раздела.

"Варфоломеев Данила" написал:Это уже что-то типа ContainerList. Там есть коллекция, которая динамически наполняется и вызывается метод onGetItemConfig при добавлении ряда.
Соответственно возможно сделать, но надо выковыривать методы/реализацию из того, что уже есть)

Данила, вопрос Дениса по сути про механизм bindTo. Строки нормально биндятся и передаются в контрол, а вот с коллекциями проблема:

user: user/7f3b869f-14f3-4d20-ab4d-7480a5fdf647
 file: undefined
 line: undefined
 column: undefined
 message: Cannot read property 'changeMethod' of undefined 
 date: Thu Jun 15 2017 17:48:10 GMT+0300 (RTZ 2 (зима))
 moduleId: SectionModuleV2_UsrSchedulerTest1Section
 moduleName: SectionModuleV2

Я читал где то про ошибку 'changeMethod', что нужно создавать bindConfig и т.п., но не помню даже где видел. Знаете что нибудь про это?

Строка тоже нет. По сути в items отправляется нечто вида:

{bindTo:"contactsItems"}

в виде объекта. И всё.

Так что не биндить, а искать другие методы надо.

Показать все комментарии