ui.property

таблица с двумя колонками - name и value, используется для отображения и изменения свойств и настроек.

Компонент особенно удобен для создания страниц для конфигурации интерфейса и визардов. Во вторую колонку вы можете добавить редактор в зависимости от типа данных. Подробнее читайте в описательной документации property.

Инициализация

var property = webix.ui({
    view:"property",
    id:"sets",
    width:300,
    elements:[
       { label:"Layout", type:"label"},
       { label:"Data url", type:"text", id:"url"},
       { label:"Data type", type:"select", options:["json","xml","csv"], id:"type"},
       { label:"Use JSONP", type:"checkbox", id:"jsonp"}
    ]
});

С чего начать

Methods
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
callEvent вызывает внутреннее событие компонента
clear удаляет все данные из элементов property
customize переопределяет свойство 'type'
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
edit включает режим редактирования для выбранного элемента
editCancel заканчивает редактирование и закрывает всё открытые радакторы (компонент остается редатируемым)
editNext закрывает текущий редактор и открывает редактор в соседней ячейке
editStop заканчивает редактирование и закрывает все открытые редакторы (компонент остаётся доступным для редактирования)
enable делает активным ранее заблокированный компонент
focusEditor перемещает фокус на активный редактор
getChildViews возвращает внутренние компоненты
getEditState возвращает объект активного редактора
getEditor возвращает объект редактора
getEditorValue возвращает значение активного (открытого в настоящий момент) редактора
getFormView возвращает объект формы, которой принадлежит компонент
getItem возвращает объект с данными элемента property по его ID
getItemNode возвращает HTML-контейнер элемента данных компонента
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getScrollState возвращает позицию скролла
getTopParentView возвращает самого верхнего родителя
getValues возвращает данные из элементов property
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
load загружает данные из внешнего источника данных
locate возвращает id элемента, для которого произошло нативное событие HTML
mapEvent направляет события от одного компонента к другому
parse загружает данные, доступные на клиенте
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
refresh перерисовывает весь компонент или один элемент
registerType добавляет новый редактор для элементов property
render отрисовывает на экране компонент или его элемент
resize перерисовывает компонент после изменения размеров
scrollTo прокручивает содержимое компонента до определенной позиции
setValues заполняет поля формы/тулбара/property sheet
show делает компонент видимым
showItem прокручивает содержимое property до указанного элемента
sync позволяет синхронизировать данные двух DataCollection (полностью или с фильтрацией)
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
updateItem работает как метод refresh, перерисовывает весь компонент
validateEditor проверяет данные в открытом на данный момент редакторе
Events
onAfterContextMenu срабатывает после вызова контекстного меню
onAfterEditStart срабатывает после начала редактирования (редактор открыт и готов к вводу информации)
onAfterEditStop срабатывает после завершения редактирования
onAfterLoad срабатывает после завершения загрузки данных
onAfterRender выполняется сразу после рендеринга компонента
onAfterScroll срабатывает после прокрутки содержимого компонента webix
onBeforeContextMenu срабатывает перед вызовом контекстного меню
onBeforeEditStart срабатывает перед началом редактирования
onBeforeEditStop срабатывает перед завершением редактирования
onBeforeLoad запускается непосредственно перед началом загрузки данных
onBeforeRender происходит непосредственно перед отрисовкой компонента
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onBlur срабатывает при смещении фокуса за пределы компонента
onCheck срабатывает после клика по чекбоксу
onDestruct происходит, когда компонент был разрушен деструктором
onEnter срабатывает после нажатия клавиши Enter
onFocus срабатывает после смещения фокуса на компонент
onItemClick срабатывает после клика по элементу компонента
onItemDblClick срабатывает после двойного клика по элементу компонента
onItemSingleClick позволяет различать события одиночного и двойного клика
onKeyPress срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус)
onLiveEdit срабатывает, когда данные были изменены в редакторе
onLoadError срабатывает при возникновении ошибки во время загрузки данных (невалидный ответ с сервера)
onLongTouch срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном)
onMouseMove срабатывает при наведении мыши на указанный компонент
onMouseMoving срабатывает при наведении указателя мыши на компонент
onMouseOut срабатывает, когда курсор мыши убирается с указанного элемента
onSwipeX срабатывает по горизонтальному свайпу
onSwipeY срабатывает по вертикальному свайпу
onTimedKeyPress срабатывает через некоторое время после нажатия клавиши в текстовом поле
onTouchEnd срабатывает после завершения события touch
onTouchMove срабатывает по время движения пальца по сенсорному экрану
onTouchStart срабатывает после touch-события в компоненте webix
onViewResize срабатывает после того, как пользователь изменил размер компонента с помощью компонента resizer
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
animate определяет анимацию для показа компонента в Multiview
autoheight подстраивает высоту компонента под его содержимое
borderless скрывает или показывает границы компонента
complexData обеспечивает корректную обработку вложенных объектов
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
data данные для компонента (массив, типизированный массив, XML или CSV)
datatype тип загружаемых данных
disabled блокирует или разблокирует компонент
editValue определяет какие поля элемента данных доступны для редактирования (применяется если в ячейке / строке данные из нескольких полей)
editable включает / выключает редактирование данных в компоненте
editaction определяет действие, по которому открывается редактор
elements массив элементов property
form форма для редактирования данных компонента
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
id ID компонента
keyPressTimeout задержка между нажатием клавиши и обработчиком
map определяет отображение данных
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
mouseEventDelay задержка между реальным действием мыши и вызовом связанных событий
nameWidth устанавливает ширину первой колонки (колонка с названиями элементов)
on позволяет присоединять обработчики к внутренним событиям компонента
onClick присоединяет обработчик клика для частей компонента с указанным классом CSS
onContext свойство, используемое для определения пользовательских обработчиков контекстного клика (клика правой кнопкой мыши) для элементов в ячейках DataTable
onDblClick обрабатывает двойные клики по областям и элементам компонентов (по названию их CSS-классов)
onMouseMove обрабатывает событие mousemove для элементов компонента с указанным классом CSS
scroll включает/отключает полосу прокрутки
scrollSpeed время, в течение которого компонент прокручивается до указанной позиции (в миллисекундах)
template template компонента
tooltip задает тултип, который появится при наведении курсора на элемент
url путь к данным, которые загрузятся в компонент сразу после инициализации
width задает ширину компонента
Other
$getSize возвращает текущий размер компонентов
$height текущая высота компонента
$scope область имен для событий и методов
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$skin вызывается после применения скина
$tooltipIn показывает тултип
$tooltipMove определяет поведение тултипа в момент, когда курсор перемещается над компонентом или HTML-областью
$tooltipOut определяет поведение тултипа в момент, когда курсор выходит за пределы компонента или HTML-области
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
name возвращает имя компонента (свойство только для чтения)
on_click переопределяет обработку кликов по элементам компонента
on_context свойство, используемое для определения пользовательских обработчиков клика правой кнопкой мыши для элементов в компонентах
on_dblclick определяет обработчики для двойных кликов по элементам компонентов (по названию их CSS-класса)
on_edit набор флагов, которые определяют, какие из типов элементов нередактируемые, а также используется для изменения типа редакторов
on_mouse_move добавляет обработчик для события mousemove над элементами компонентов (по названию их CSS-класса)
on_render используется для отрисовки пользовательских редакторов
type текущий набор методов и свойств, которые определяют вид и содержимое компонента
Наверх