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;
});

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

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
});

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

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

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); })
                        }