Вопрос

Загрузка визуального модуля на страницу

27 марта 2015 10:45

Добрый день, коллеги!
Помогите решить следующую задачу:

bpm'online 7.5
Мне нужно создать модуль, который будет являть собой страницу с таблицей. Таблицу необходимо заполнить данными, сгенерированными в том же модуле (например, статично заданные демо-данные; в дальнейшем будет выполняться запрос к веб-сервису для получения данных).
На странице, например, контрагента я создам вкладку, и в эту вкладку мне нужно загрузить этот модуль с таблицей.

Нравится

4 комментария

Андрей Каспаревич

27 марта 2015 12:39

Здравствуйте, Евгений!
В целом Вам необходимо создать модуль, расширяющий BaseSchemaModuleV2, в который будет загружаться страница с содержимым. Затем загрузить этот модуль в контейнер. Пример модуля:

define("ModuleName", ["BaseSchemaModuleV2"], function() {
 
	Ext.define("Terrasoft.configuration.ModuleName", {
		alternateClassName: "Terrasoft.ModuleName",
		extend: "Terrasoft.BaseSchemaModule",
 
		/**
		 * Инициализирует название схемы.
		 * @protected
		 * @overridden
		 */
		initSchemaName: function() {
			this.schemaName = "PageName";
		},
 
 
		/**
		 * Заменяет последний элемент в цепочке состояний, если его идентификатор модуля отличается от текущего.
		 * @protected
		 * @overridden
		 */
		initHistoryState: Ext.emptyFn
 
	});
	return Terrasoft.ModuleName;
});

На странице "PageName" необходимо реализовать отображение таблицы.
Загружать модуль в контейнер можно следующим образом:

var schemaName = "PageName";
var pageId = this.sandbox.id + schemaName;
this.showBodyMask();
this.sandbox.loadModule("ModuleName", {
	renderTo: "ModuleNameContainer", //Id контейнера
	id: pageId,
	keepAlive: true
});

Ответить

Яландаев Евгений

31 марта 2015 10:12

Андрей, спасибо за ответ. К сожалению, с указанным способом возникли затруднения, и я реализовал модуль по-другому:

define("VisualModule", ["VisualModuleResources", "ViewUtilities", "ServiceHelper", "BaseModule", "ContainerList", "css!VisualModule"],
    function(resources, ViewUtilities, ServiceHelper) {
        Ext.define("Terrasoft.configuration.VisualModule", {
            alternateClassName: "Terrasoft.VisualModule",
            extend: "Terrasoft.BaseModule",
 
            Ext: null,
            sandbox: null,
            Terrasoft: null,
 
            getContainer: function() {
                var itemsContainer = ViewUtilities.getContainerConfig("itemsContainer",
                    ["items-container-class"]);
                itemsContainer.items.push({
                    className: "Terrasoft.Button",
                    style: Terrasoft.controls.ButtonEnums.style.TRANSPARENT,
                    classes: {textClass: ["cancel-all-class"]},
                    caption: "AddToCollection",
                    click: {bindTo: "onButtonClick"}
                });
                itemsContainer.items.push({
                    className: "Terrasoft.ContainerList",
                    id: "CON1",
                    idProperty: "Id",
                    selectors: {wrapEl: "#CON1"},
                    collection: {bindTo: "itemsCollection"},
                    defaultItemConfig: this.getItemConfig()
                });
                return itemsContainer;
            },
            getItemConfig: function() {
                var itemConfig;
                itemConfig = ViewUtilities.getContainerConfig("ItemContainer",
                    ["item-container"]);
                var itemTopContainer = ViewUtilities.getContainerConfig("itemTopContainer",
                    ["item-top-container"]);
 
                itemTopContainer.items.push({
                    className: "Terrasoft.Label",
                    caption: {bindTo: "displayValue"},
                    classes: {labelClass: ["button-caption-labelClass"]}
                });
                itemConfig.items.push(itemTopContainer);
 
                return itemConfig;
            },
            getView: function() {
                var viewItems = [];
                var textEdit = {
                    className: "Terrasoft.TextEdit",
                    width: 100,
                    value: {"bindTo": "textValue"}
                };
                var bindedContainer = this.getContainer();
 
                viewItems.push(textEdit);
                viewItems.push(bindedContainer);
 
                return this.Ext.create("Terrasoft.Container", {
                    id: "mainContainer",
                    selectors: {wrapEl: "#mainContainer"},
                    classes: {wrapClassName: ["main-container-style"]},
                    items: viewItems
                });
            },
 
            getViewModel: function() {
                var scope = this;
                var sandbox = scope.sandbox;
                var Terrasoft = scope.Terrasoft;
                var viewModel = Ext.create("Terrasoft.BaseViewModel", {
                    values: {
                        textValue: "Some text",
                        itemsCollection: new Terrasoft.Collection()
                    },
                    methods: {
                        onButtonClick: function(){
                            var collection = this.get("itemsCollection");
                            var item = { value: "Id1", displayValue: "Name1"};
                            this.decorateItem(item)
                            collection.add(this.newGuid(), item);
 
                        },
                        decorateItem: function(item) {
                            item.sandbox = sandbox;
                            item.Terrasoft = Terrasoft;
                        },
                        newGuid: function() {
                            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
                                function(c) {
                                    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                                    return v.toString(16); })
                        }
                    }
                });
                viewModel.Ext = this.Ext;
                viewModel.Terrasoft = this.Terrasoft;
                viewModel.sandbox = this.sandbox;
                return viewModel;
            },
 
            render: function(renderTo) {
                var view = this.getView();
                var viewModel = this.getViewModel();
                view.bind(viewModel);
                view.render(renderTo);
            }
        });
        return Terrasoft.VisualModule
    });

Загружаю модуль так:

var schemaName = "PageName";
var pageId = this.sandbox.id + schemaName;
this.sandbox.loadModule("VisualModule", {
renderTo: "SmrMediaplanPage6Tab", //Id контейнера
id: pageId,
keepAlive: true
});

На страницу успешно загружается модуль, и даже текстовое поле получает привязку:

В коде добавлен контейнер типа Terrasoft.ContainerList, и сделана привязка к коллекции itemsCollection из ViewModel (itemsCollection: new Terrasoft.Collection())

При попытке добавить элемент в эту коллекцию:

var collection = this.get("itemsCollection");
var item = { value: "Id1", displayValue: "Name1"};
this.decorateItem(item)
collection.add(this.newGuid(), item);

происходит ошибка в ContainerList.js:
не видит метода get()

Примеры кода я копировал из стандартных модулей, и там такой проблемы само собой не возникает. Скорее всего, я ещё что-то не учёл, но пока не понимаю что.

Как правильно забиндить ContainerList?

Ответить

Андрей Каспаревич

31 марта 2015 11:00

День добрый!
Так а откуда в Вашем item должен появиться метод get?
По идее, item должен быть экземпляром класса Terrasoft.BaseViewModel, а у Вас - это просто объект, в который добавлены несколько свойств.
Попробуйте так:

var item = this.Ext.create("Terrasoft.BaseViewModel", {
	values: {
		Id: "Id1",
		Name: "Name1"
	}
});

И еще проверьте, есть ли значение в this.idProperty. Там должна быть строка с названием колонки-идентификатора.
Вместо вот этого страха:

newGuid: function() {
                            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,
                                function(c) {
                                    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                                    return v.toString(16); })
                        }

Можно использовать метод Terrasoft.generateGUID().

Ответить

Яландаев Евгений

31 марта 2015 11:13

Андрей, спасибо, это то, что нужно! :)
Сделал item как Terrasoft.BaseViewModel, и всё получилось.

Ответить

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