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

Здравствуйте, Евгений!
В целом Вам необходимо создать модуль, расширяющий BaseSchemaModuleV2, в который будет загружаться страница с содержимым. Затем загрузить этот модуль в контейнер. Пример модуля:
[javascript]
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;
});
[/javascript]

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

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

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

[javascript]
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
});

[/javascript]

Загружаю модуль так:
[javascript]
var schemaName = "PageName";
var pageId = this.sandbox.id + schemaName;
this.sandbox.loadModule("VisualModule", {
renderTo: "SmrMediaplanPage6Tab", //Id контейнера
id: pageId,
keepAlive: true
});
[/javascript]

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

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

При попытке добавить элемент в эту коллекцию:
[javascript]
var collection = this.get("itemsCollection");
var item = { value: "Id1", displayValue: "Name1"};
this.decorateItem(item)
collection.add(this.newGuid(), item);
[/javascript]

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

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

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

День добрый!
Так а откуда в Вашем item должен появиться метод get?
По идее, item должен быть экземпляром класса Terrasoft.BaseViewModel, а у Вас - это просто объект, в который добавлены несколько свойств.
Попробуйте так:
[javascript]
var item = this.Ext.create("Terrasoft.BaseViewModel", {
values: {
Id: "Id1",
Name: "Name1"
}
});
[/javascript]
И еще проверьте, есть ли значение в this.idProperty. Там должна быть строка с названием колонки-идентификатора.
Вместо вот этого страха:
[javascript]
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); })
}
[/javascript]
Можно использовать метод Terrasoft.generateGUID().

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