Функции, используемые для переключение между компонентами MultiView

Используя для переключения между компонентами MultiView средства API, вы можете ссылаться как на ячейки и компоненты в них, так и на контролы переключения.

Задать Value для Tabbar/Segmented/TabView

У любого из контролов, как и у TabView есть общие правила инициализации, где вкладки хранятся в массиве options:

{view:"tabbar", id:"tabbar1", multiview:true, options: 
    [{id:"1", value:"Tab1"}, {id:"2", value:"Tab2"}]
}

Вкладки связаны с ячейками MultiView, т.о. если вы зададите value для кнопки, будет открыта соответствующая вкладка с компонентом:

$$("tabbar1").setValue("2"); // будет задана 2-ая вкладка, с "Tab2"

Отобразить нужный компонент

Следующие функции используются для работы с видимостью компонентов:

show(); - делает заданный компонент видимым. Вызывается внутри этого компонента;
back(); - переключает на предыдущий компонент. Вызывается внутри объекта MultiView.

Чтобы включить переключение между компонентами необходимо:

использовать Webix кнопку или стандартную кнопку HTML и задать ей обработчик события;
вызвать функцию переключения или любое событие приложения, например "onItemClick" - позволяет по клику на любой компонент (необязательно кнопку), делать заданный компонент видимым.

MultiView с двумя ячейками

webix.ui({
    view:"multiview", 
    id:"views",
    cells:[
        { id:"listView", view:"list" },
        { id:"formView", view:"form" }
    ]
 })
 
 // кнопка html 
 <input type='button' onclick='$$("cell_a").show()' value="show cell A"> 
 
 // переключение срабатывает при нажатии на элемент list
$$("listView").attachEvent("onItemClick",function(id){
        $$('formView').show();
})
 
 // переключение на предыдущую вкладку - срабатывает одновременно с сохранением form
function save(){
    $$("formView").save();
    $$("views").back();
}

Related sample: 'Show/Back' Navigation

Вложенный MultiView

Если ячейка MultiView содержит в себе ячейки, т.е. сама является MultiView, доступ к вложенным компонентам потребует вызова метода show() со значением true.

rows:[
    { cells:[ // 1-я ячейка
        {
            id:"listView",
            view:"list"},
        {
            id:"chartView", // 2-я ячейка
            cells:[
                {
                    view:"chart", // 1-я вложенная ячейка
                    type:"bar"},
                {                              
                    view:"chart", // 2-я вложенная ячейка
                    type:"donut"}
            ]
        }
    ]
}]

Чтобы переключиться из компонента list в любую ячейку с chart (в примере кода выше), вызовите метод show(true):

<input type='button' onclick='$$("chart1").show(true)' 
    value="show chart1 and parents">

Чтобы переключаться между вложенными компонентами одного уровня, не нужно ссылаться на родительский компонент, достаточно вызова show().

Related sample: Nested Multiviews

Статьи по теме

Наверх