Как в мобильной версии приложения вывести дополнительные колонки в реестра раздела

Вопрос

По умолчанию мастер мобильного приложения позволяет добавить в реестр раздела только два поля.

Пример:

Возможно ли увеличить количество отображаемых полей? Если не через мастер, то через код.

Ответ

В реестре может отображаться не только колонка для отображения, но можно выводить и значения, сформированные на основании значений нескольких колонок. Для такого сложного форматирования, или отображения разных значений в зависимости от условий, значения колонок можно задавать в виде функций (используя методы Terrasoft.sdk.GridPage.setPrimaryColumn() и Terrasoft.sdk.GridPage.setSecondaryColumn()):

Terrasoft.sdk.GridPage.setPrimaryColumn('Account', {
	columns: ['Name', 'PrimaryContact'],
	convertFunction: function(values) {
		if (!Ext.isEmpty(values.PrimaryContact)) {
			return values.Name + ' (' + values.PrimaryContact + ')';
		} else {
			return values.Name;
		}
	}
});

Кроме того, можно указывать дополнительные колонки и при выборе значения поля-справочника. Делается это по аналогии с гридом, но только используется класс Terrasoft.sdk.LookupGridPage:

Terrasoft.sdk.LookupGridPage.setSecondaryColumn("Account", "PrimaryContact");

А вот альтернативный вариант расширения возможностей грида - изменение шаблона элементов грида:

Terrasoft.util.writeStyles(
	".div-table {",
		"display:table;",
		"width:100%;",
	"}",
	".div-table-row {",
		"display:table-row;",
		"width:100%;",
		"clear:both;",
	"}",
	".div-table-col {",
		"float:left;",
		"display:table-column;",
		"min-width:50%;",
	"}",
	".div-table-col-button {",
		"float:right;",
		"display:table-column;",
	"}"
);

Ext.define("MyCustomList", {
	override: "Ext.Terrasoft.List",
 
	initializeItemTpl: function() {
		this.callParent(arguments);
		var store = this.getStore();
		var model = store.getModel();
		var modelName = model.getName();
		if (modelName === "Account") {
			var tpl = this.getItemTpl();
			tpl.html =
			"<div class=\"x-list-item-tpl div-table\">" +
				"<div class=\"div-table-row\">" +
					"<div class=\"div-table-col\">{[this.applyPrimaryColumn(values)]}</div>" +
					"<div class=\"div-table-col-button\">{Phone}</div>" +
				"</div>" +
				"<div class=\"div-table-row\">" +
					"<div class=\"div-table-col\">{[this.applySecondaryColumn(values)]}</div>" +
					"<div class=\"div-table-col-button\">{Web}</div>" +
				"</div>" +
			"</div>";
		}
	}
 
});