Вопрос

Перенос строки в виртуальном поле

Добрый день, коллеги! 

Создал мини-карточку для отображения некоторых деталей. Сделал виртуальное поле в которое хочу записать список один под другим:

"VacancyNames": {
		"dataValueType": Terrasoft.DataValueType.TEXT,
		"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
		"value": 'Один\r\nдва',
		"customConfig": {
		"className": "Terrasoft.MemoEdit"
	}
}

 Заполняю список

Terrasoft.each(entities, function (entity) 
{
   var ResponceNameValue = entity.get('Name');
       AllVacancy += ResponceNameValue + '\r\n';
});
this.set("VacancyNames", AllVacancy);

Но в результате все выводится сплошным текстом в мини-карточке... Подскажите, пожалуйста, как осуществить перенос?

Нравится

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

Здравствуйте)

В зависимости от того, каким должен быть конечный результат, Вы можете решить данную задачу 2 способами.

1. В схеме таблицы детали создать поле-справочника, в котором уже будут указаны нужные данные и просто добавить его на мини-карточку (аналогично, как и на обычную страницу редактирования). 

2. Этот способ более трудоемкий. Нужно создать виртуальное поле с типом 'ENUM' и потом реализовать методы и обработчики для работы с этим полем.

Ниже приблизительный код, как это реализовать:

define("CasePage", ["CasePageResources", "terrasoft"],

    function(resources, Terrasoft) {

    return {

        entitySchemaName: "Case",

        details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,

        attributes: {

            "myEnum": {

                "dataValueType": Terrasoft.DataValueType.ENUM,

                "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,

                "caption": "myEnum"

            },

            "myList": {

                "dataValueType": Terrasoft.DataValueType.ENUM,

                "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,

                "isCollection": true

            }

        },

        diff: /**SCHEMA_DIFF*/[

            {

                "operation": "insert",

                "name": "myEnum",

                "values": {

                    "caption": "myEnum",

                    "dataValueType": this.Terrasoft.DataValueType.ENUM,

                    "bindTo": "myEnum",

                    "layout": { "colSpan": 24, "rowSpan": 1, "column": 0, "row": 4 },

                    "controlConfig": {

                        "className": "Terrasoft.ComboBoxEdit",

                        "list": {

                            "bindTo": "myList"

                        },

                        "change": {

                            "bindTo": "onMyValueChange"

                        },

                        "prepareList": {

                            "bindTo": "prepareMyList"

                        }

                    }

                },

                "parentName": "SolutionTab_gridLayout",

                "propertyName": "items",

                "index": 1

            }

        ]/**SCHEMA_DIFF*/,

        methods: {

            onPageInitialized: function(callback, scope) {

                if (!this.get("myList")) {

                    this.set("myList", this.Ext.create("Terrasoft.Collection"));

                }

                

                if (callback) {

                    callback.call(scope || this);

                }

            },

            onEntityInitialized: function() {

                this.callParent(arguments);

                

                // and just for debug:

                document.scope = this;

            },

            prepareMyList: function(filter, list) {

                if (list === null) {

                    return;

                }

                list.clear();

                var columns = {};

                

                var value1 = {

                    displayValue: "a123",

                    value: "1"

                };

                var value2 = {

                    displayValue: "b234",

                    value: "2"

                };

                var value3 = {

                    displayValue: "c345",

                    value: "3"

                };

                

                columns[1] = value1;

                columns[2] = value2;

                columns[3] = value3;

                

                list.loadAll(columns);

            },

            onMyValueChange: function(val) {

                if (val && val.displayValue) {

                    console.log("you pick: ", val.displayValue);

                }

            }

        },

        rules: {}

    };

});

 

 

 

Не могли бы вы описать как добавить существующую деталь на мини-карточку?

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

Когда я присваиваю этот текст колонке "1\r\n2\r\n3":

this.set("VacancyNames", "1\r\n2\r\n3");

- в мини-карточке он выводится как "1 2 3", а не 

1

2

3

Куда то теряются символы переноса на новую строку. 

mcNosferatum пишет:

Не могли бы вы описать как добавить существующую деталь на мини-карточку?

насколько мне известно, то текущая реализация BaseMiniPage, от которой наследуются мини-карточки, не предполагает добавление деталей на мини-карточку. Если Вам всё-таки нужно реализовать детали, тогда прийдется либо реализовать свою базовую карточку с деталями, либо переделать существующую.

mcNosferatum пишет:

Мне не нужен выпадающий список, я хочу просто вывести текст в виртуальную колонку с переносом каждой строки одна под другой

Таким образом, как Вы хотите реализовать не получится.

Можете уточнить, какую задачу Вы хотите решить? Разве потом эти значения не должны сохраняться в определенное поле?

Вот смысл задачи: при наведении на запись раздела, должна появиться мини-карточка со списком полей из детали данного раздела. К примеру в разделе контактов есть деталь с образованием. Нужно отобразить на мини карточке 10 записей. И если их отображать в одну строчку - это выглядит ужасно и нечитабельно... Поэтому необходимо каким то образом отобразить эти записи, визуально читабельно. Хотя бы используя банальный перенос строки. Но он почему то не работает. Какие еще возможны варианты отображения?

Попробуйте для переноса строки использовать <br />

Дмитрий А.,

Так тоже пробовал - не работает. Воспринимает тэг переноса как текст и просто выводит "1<br/>2<br/>3<br/>"

Получается что во время присвоения он автоматом заменяет теги на  &lt;br&gt; - в результате чего они превращаются в текст.

А само поле на странице у вас многострочное? Если нет, то нужно добавить в diff такую строчку:

        "contentType": 0

{
	"operation": "insert",
	"name": "VacancyNames",
	"values": {
		"bindTo": "VacancyNames",
		"contentType": 0 //вот сюда
	}
}

После этого заработают переносы через \r\n

Не получилось. Вот вам полный код моей мини карточки:

define("BpMiniPage", [], function() {
    return {
        entitySchemaName: "Proj",
        attributes: {
            "MiniPageModes": {
                "value": [this.Terrasoft.ConfigurationEnums.CardOperation.VIEW]
            },
            "VacancyNames": {
				"dataValueType": Terrasoft.DataValueType.TEXT,
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
				"value": 'Empty',
				"customConfig": {
					"className": 'Terrasoft.controls.MemoEdit',
					"height": '100px'
			    }
			}
        },
        diff: /**SCHEMA_DIFF*/[
            {
                "operation": "insert",
                "name": "Title",
                "parentName": "HeaderContainer",
                "propertyName": "items",
                "index": 0,
                "values": {
                    "labelConfig": {
                        "visible": false
                    },
                    "isMiniPageModelItem": true
                }
            },
            {
                "operation": "insert",
                "name": "VacancyNames",
                "parentName": "MiniPage",
                "propertyName": "items",
                "values": {
                    "labelConfig": {
                        "visible": false
                    },
                    "isMiniPageModelItem": true,
                    "contentType": 0,
                    "layout": {
                        "column": 0,
                        "row": 1,
                        "colSpan": 24
                    }
                }
            }
        ],
        methods: {
        	init: function() {
				this.callParent(arguments);
				this.setProjectVacancy();
        	},
        setProjectVacancy: function() 
        	{
        		this.set("VacancyNames", "1\r\n2\r\n3\r\n4");
			}
        }
        /**SCHEMA_DIFF*/
    };
});

Получается вот так:

А необходимо вот так:

Все уже перепробовал....

Может мини-карточка просто так не умеет?

Если у вас всего одно поле, которое необходимо вывести, можно вместо мини-карточки сделать так:

this.showInformationDialog("1<br />2");

С диалогом заработало, но только не через <br>, а так: this.showInformationDialog("1\r\n2\r\n3\r\n4\r\n5"); 

В диалоге не устраивает в том, что он висит как модальное окно, карточка же висит как всплывающая подсказка и исчезает при отведении мыши с элемента.

Заметил еще одну особенность, установил поле: "isMiniPageModelItem": false - в результате отобразился текст как надо, НО только первые 3 строки. Остальные скрыты внутри. Возможно ли как то изменить динамически высоту элемента?

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