Вопрос
Технические вопросы
7.x

Установить инлайновые стили на этапе объявления элемента в схеме ?

Севостьянов Илья Сергеевич
5 апреля 2017 15:20

Имеется ли все таки возможность установить инлайновые стили на этапе объявления элемента в схеме ?
В исходных кодах найдено неоднократное использование аттрибута конфигурационного элемента "styles"
В который передается дочерний объект содержащий стили в виде ассоциативного массива.

...
        styles: {
                textStyle: {
                        margin: '0px 10px 0px 0px'
                }
        },
...
        styles: {
                wrapStyles: {
                        margin: "18px 0px 0px " + (35 * index) + "px"
                }
        },
...
        styles: {
              wrapperStyle: {
                        'float': 'right'
              }
         },

Причем ключ дочернего объекта мне по встречался 3-х вариантов:
wrapperStyle
wrapStyles
textStyle
Судя по всему в этом есть смысл...
А началось собственно все с найденного в исходниках модуля Switcher:
/**
* Объект для спецификации inline-стилей компонента указанных в шаблоне.
* Если в {@link #tpl шаблоне} указано имя стиля, то в объекте стилей должно быть свойство с таким же имененм.
* Если свойство со стилями не будет найдено, то атрибут со стилями будет удален из шаблона. Специфицировать
* стили компонента можно в любом из двух методов {@link #getTpl getTpl()} и {@link #getTplData getTplData()}.
* @overridden
* @type {Object}
*/
styles: {
wrapStyles: {},
innerWrapStyles: {},
trueValueStyle: {},
falseValueStyle: {}
},

Но как видно наименования ключей все же различаются...
Методом эксперимента я попробовал использовать этот атрибут конфигурационного объекта в замещающих схемах - но к сожалению они не работают.

Подскажите найденные в исходных кодах примеры - это какие-то частные случаи ?
Или я что-то делаю не так ?
Существует ли штатный способ добавления инлайновых стилей к врапперам объектов, на этапе объявления их конфигурационных объектов в схемах ?

Нравится

3 комментария
Варфоломеев Данила
5 апреля 2017 15:32

Вы про это?

{
	"operation": "insert",
	"name": "HeaderContainer",
	"parentName": "MainContainer",
	"propertyName": "items",
	"values": {
		"itemType": Terrasoft.ViewItemType.CONTAINER,
		"generateId": false,
		"styles": {
			"padding-bottom": "3em",
			"min-height": "3.2em",
			"margin-left": "-8px"
		},
		"items": []
	}
}

Вроде как в styles у элемента можно что угодно прописать. Но это не точно)
Лучше смотреть, какой у элемента wrapper, добавлять в него класс, а класс описывать в отдельном модуле.
Отдельный привет ребятам из терика, по конфигурации разбросаны: wrapClass, wrapperClass, wrapClasses, wrapClassName и т.п.
У - Унификация

Севостьянов Илья Сергеевич
5 апреля 2017 15:57

"Варфоломеев Данила" написал:Вроде как в styles у элемента можно что угодно прописать. Но это не точно)

Да вот что-то у меня ничего не получилось, ни так как у вас - с перечислением силей в корне, потом я нашел упоминания вот этого "styles"
а в нем в свою очередь wrapStyles
Попробовал так, было в этом какое-то рациональное зерно, т.к. элемент в конечном итоге как-бы во враппер помещается и вроде как стили надо бы ему устанавливать...
Но как я ни пробовал - по аналогии с найденными примерами использования, так у меня ни в одну схему так стили и не вывелись.

С классами - все ясно, но блин создавать целый модуль отдельный чтобы на 2 пикселя паддинг поправить, это как-то "из пушки по воробьям".
А добиться к элементу через Ext.select().setStyle - по какому ни будь Ready Event ну уж как-то "пахнет костылями"
Кстати штатные браузерные "window.onload" и "document.addEventListner('DOMContentLoaded'..." - почему-то фейлятся, штатный Ext.onReady почему-то стартует еще до отрисовки
Так что приходится подбирать подходящий метод из событийной модели самго BPMOnline.

Терещук Павел
6 апреля 2017 17:57

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

Немного про style && class: При создании шаблона и использования в верстке тегов style и class надо использовать свойства styles и classes. styles - это объект в котором можно задавать набор свойств стилей для тегов style шаблона. classes - объект, свойства которого - массивы.
Например:

tpl: [
    '<div style = "{wrapStyle}" class = "{wrapClass}">',
        '<span id = "{id}" class = "{labelClass}" style = "{labelStyle}">{text}',
        '</span>',
    '</div>'
],
classes: {
    wrapClass: ['wrap', 'wrap-important', 'top-element'],
    labelClass: ['wrap-el', 'label', 'caption-el']
},
styles: {
    wrapStyle: {
        backgroundImage: this.image
    },
    labelStyle: {
        font: this.font,
        whiteSpace: this.getWrapStyle(this.wrap)
    }
}

wrapStyle, labelStyle - объекты задающие стили для конкретных елементов шаблона (напр. div, span, p, ...)
Также, при создании собственного шаблона рекомендуется указать шаблон id="{id}".
Пример: ' id="{id}">...'
В указанных случаях в объекте tplData устанавливать эти свойства не надо, перед формированием шаблона стили и классы анализируются и подменяются актуальными значениями из соответствующих свойств. Если в компоненте не будут указаны стили, атрибут style будет автоматически удален из шаблона.

Так же рекомендую почитать статью.

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