Установить инлайновые стили на этапе объявления элемента в схеме ?
Имеется ли все таки возможность установить инлайновые стили на этапе объявления элемента в схеме ?
В исходных кодах найдено неоднократное использование аттрибута конфигурационного элемента "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: {}
},
Но как видно наименования ключей все же различаются...
Методом эксперимента я попробовал использовать этот атрибут конфигурационного объекта в замещающих схемах - но к сожалению они не работают.
Подскажите найденные в исходных кодах примеры - это какие-то частные случаи ?
Или я что-то делаю не так ?
Существует ли штатный способ добавления инлайновых стилей к врапперам объектов, на этапе объявления их конфигурационных объектов в схемах ?
Нравится
Вы про это?
{ "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 и т.п.
У - Унификация
"Варфоломеев Данила" написал:Вроде как в styles у элемента можно что угодно прописать. Но это не точно)
Да вот что-то у меня ничего не получилось, ни так как у вас - с перечислением силей в корне, потом я нашел упоминания вот этого "styles"
а в нем в свою очередь wrapStyles
Попробовал так, было в этом какое-то рациональное зерно, т.к. элемент в конечном итоге как-бы во враппер помещается и вроде как стили надо бы ему устанавливать...
Но как я ни пробовал - по аналогии с найденными примерами использования, так у меня ни в одну схему так стили и не вывелись.
С классами - все ясно, но блин создавать целый модуль отдельный чтобы на 2 пикселя паддинг поправить, это как-то "из пушки по воробьям".
А добиться к элементу через Ext.select().setStyle - по какому ни будь Ready Event ну уж как-то "пахнет костылями"
Кстати штатные браузерные "window.onload" и "document.addEventListner('DOMContentLoaded'..." - почему-то фейлятся, штатный Ext.onReady почему-то стартует еще до отрисовки
Так что приходится подбирать подходящий метод из событийной модели самго BPMOnline.
Здравствуйте!
Немного про 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 будет автоматически удален из шаблона.
Так же рекомендую почитать статью.