Публикация

Простейшее модальное окно (ModalBox)

Вопрос

Как передать информацию из модального окна?

Ответ

1) Создайте страницу модального окна - «Схема модели представления карточки», без указания родительской схемы:

define("UsrMyModalPage", ["ModalBox"], function(ModalBox) {
	return {
		attributes: {
			"TestText": {
				dataValueType: Terrasoft.DataValueType.TEXT,
				type: Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
			}
		},
		messages: {
			"DataFromModal": {
				mode: Terrasoft.MessageMode.PTP,
				direction: Terrasoft.MessageDirectionType.PUBLISH
			}
		},
		methods: {
			init: function(callback, scope) {
				this.callParent(arguments);
			},
			onRender: function() {
			},
			onCloseButtonClick: function() {
				this.sandbox.publish("DataFromModal", { test: this.get("TestText") }, [this.sandbox.id]);
				ModalBox.close();
			}
		},
		diff: [
			{
				"operation": "insert",
				"name": "MyContainer",
				"propertyName": "items",
				"values": {
					"itemType": Terrasoft.ViewItemType.CONTAINER,
					"items": []
				}
			},
			{
				"operation": "insert",
				"parentName": "MyContainer",
				"propertyName": "items",
				"name": "MyGridContainer",
				"values": {
					"itemType": Terrasoft.ViewItemType.GRID_LAYOUT,
					"items": []
				}
			},
			{
				"operation": "insert",
				"parentName": "MyGridContainer",
				"propertyName": "items",
				"name": "TestText",
				"values": {
					"bindTo": "TestText",
					"caption": "Test text",
					"layout": {"column": 0, "row": 0, "colSpan": 10}
				}
			},
			{
				"operation": "insert",
				"parentName": "MyGridContainer",
				"name": "CloseButton",
				"propertyName": "items",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"style": Terrasoft.controls.ButtonEnums.style.BLUE,
					"click": {bindTo: "onCloseButtonClick"},
					"markerValue": "CloseButton",
					"caption": "OK",
					"layout": { "column": 0, "row": 1, "colSpan": 3 }
				}
			}
		]
	};
});

2) Создайте модуль модального окна - «Модуль», с одной единственной зависимостью на вышесозданную страницу.

define("UsrMyModalModule", ["ModalBox", "BaseSchemaModuleV2"],
		function(ModalBox) {
	Ext.define("Terrasoft.configuration.UsrMyModalModule", {
		extend: "Terrasoft.BaseSchemaModule",
		alternateClassName: "Terrasoft.UsrMyModalModule",
		/**
		 * @inheritDoc Terrasoft.BaseSchemaModule#generateViewContainerId
		 * @overridden
		 */
		generateViewContainerId: false,
		/**
		 * @inheritDoc Terrasoft.BaseSchemaModule#initSchemaName
		 * @overridden
		 */
		initSchemaName: function() {
			this.schemaName = "UsrMyModalPage";
		},
		/**
		 * @inheritDoc Terrasoft.BaseSchemaModule#initHistoryState
		 * @overridden
		 */
		initHistoryState: Terrasoft.emptyFn,
	});
	return Terrasoft.UsrMyModalModule;
});

3) Создайте замещающую страницу редактирования для добавления созданного модального окна:

define("ContactPageV2", ["ContactPageV2Resources", "GeneralDetails", "ModalBox"],
function(resources, GeneralDetails, ModalBox) {
	return {
		entitySchemaName: "Contact",
		messages: {
			"DataFromModal": {
				mode: Terrasoft.MessageMode.PTP,
				direction: Terrasoft.MessageDirectionType.SUBSCRIBE
			}
		},
		details: /**SCHEMA_DETAILS*/{
		}/**SCHEMA_DETAILS*/,
		methods: {
			subscribeSandboxEvents: function() {
				this.callParent(arguments);
				this.sandbox.subscribe("DataFromModal", function(arg) {
					console.log("msg from modal: " + arg.test);
				}, this, [this.sandbox.id + "_" + "UsrMyModalModule"]);
			},
			loadMyModal: function() {
				var sandbox = this.sandbox;
				var config = {
					heightPixels: 420,
					widthPixels: 750
				};
				var moduleName = "UsrMyModalModule";
				var moduleId = sandbox.id + "_" + moduleName;
				var renderTo = ModalBox.show(config, function() {
					sandbox.unloadModule(moduleId, renderTo);
				});
				sandbox.loadModule(moduleName, {
					id: moduleId,
					renderTo: renderTo
				});
			},
			onMyClick: function() {
				this.loadMyModal();
			},
			onEntityInitialized: function() {
				this.callParent(arguments);
			}
		},
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"parentName": "CombinedModeActionButtonsCardContainer",
				"propertyName": "items",
				"name": "MainContactButton",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"caption": "пыщь-пыщь",
					"click": {"bindTo": "onMyClick"}
				}
			}
		]/**SCHEMA_DIFF*/
	};
});

 

Нравится

Поделиться

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

Очень полезная публикация, спасибо.

Хочу обратить внимание на строку "Создайте страницу модального окна - «Схема модели представления карточки», без указания родительской схемы:". У меня в 14-ой версии без указания родительской схемы схема от модуля не подгружалась. Указал зависимость от BaseEntityPage - всё заработало.

Спасибо за уточнение. Судя по упоминаниям BaseEntityPage в обзорах обновлений 7.8.1 и 7.8.2, это изменение могло произойти уже довольно давно.

Товарищи, это не работает :( Есть актуальный пример?

Надежда, ещё пример есть в комментариях к этой теме. А что именно у Вас не работает в этом?

Добрый день! Возможно создать кастомное модальное окно на портале?

Денис Суров,

 

Добрый день.

Для портальных страниц можно использовать эту же инструкцию - делаете замещение необходимой вам портальной страницы (например PortalCasePage) и добавляете код из п.3 данной публикации.

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