Добавление и удаление ячеек MultiView

В зависимости от того, какой компонент вы используете, существует два подхода:

• Если вы используете multiview с контролом (tabbar или segmented), вам необходимо работать и с multiview, и с контролом для переключения. Другими словами, вам необходимо добавлять и удалять опции для таббара и в то же время добавлять и удалять компоненты для multiview.

• Если же вы используете tabview (компонент, который включает в себя встроенные multiview и tabbar), обратите внимание, что у него есть свои методы для добавления и удаления компонентов с соответствующими вкладками.

Использование Tabbar и MultiView

И у Tabbar, и у Segmented есть отдельные части - вкладки или кнопки - которые задаются свойством options.
Вы можете привязать каждую из этих опций к отдельному компоненту и добавить им обработчик клика.

Контролы для переключения

view:"segmented"
view:"tabbar"

Вкладки/кнопки можно добавлять и удалять динамически с помощью следующих методов:

• addOption() - добавляет вкладку/кнопку согласно переданной конфигурации;
• removeOption() - удаляет вкладку/кнопку по ID.

Ячейки MultiView можно добавлять и удалять динамически с помощью:

• addView() - добавляет компонент в лейаут (multiview это лейаут) согласно переданной конфигурации;
• removeView() - удаляет ячейку лейаута. Принимает объект дочернего элемента или его ID в качестве параметра.

Добавление

rows:[
    {view:"tabbar", id:"tabs", multiview:true, options:[], ..}, // пустой таббар
    {view:"multiview", id:"views", cells:[
        {template:"..."} // у multiview должна быть хотя бы одна ячейка 
    ]}
]    
...
 
function open_new_tab(id){  
    var item = $$('list1').getItem(id);
 
    // добавляем новую ячейку multiview
    $$("views").addView({ view:"template", id:item.id, template:item.title});
    // добавляем опцию в таббар
    $$('tabs').addOption(item.id, item.title, true);
};

Удаление

function del_tab(){
    // получаем ID активной вкладки
    var id = $$("tabs").getValue(); 
 
    // удаляем опцию
    $$("tabs").removeOption(id);
 
    // удаляем связанный компонент
    $$("views").removeView(id);
}

Related sample:  Dynamic Adding/Deleting of Tabs in Tabbar

Использование TabView

TabView это гибрид multiview и tabbar.
У него есть два метода, которые позволяет добавлять и удалять ячейки с соответствующими вкладками.

Каждая комбинация вкладки и ячейки задаются следующим образом:

{ header:"header_title", body:{ // ...view config }

Такая же конфигурация передаётся в метод addView():

$$("tabview1").addView({
    header:"New Tab",
    body:{ // webix.uid() генерирует произвольное число
        template:"New content "+webix.uid()
    }
});

Ячейку TabView можно удалить с помощью метода removeView(), который принимает ID необходимой ячейки:

var id = $$("tabview1").getValue(); // id активной ячейки
$$("tabview1").removeView(id);

Related sample:  Tabview: Adding and Removing Tabs

Встроенная кнопка 'Закрыть' для вкладки

В Webix Tabbar можно добавить кнопку 'Закрыть':

// всем вкладкам
{view:"tabbar", close:true, options:[]}
 
// некоторым вкладкам
{view:"tabbar", options:[
    {id:1, value:"Tab 1", close:true},
    {id:2, value:"Tab 2"}
]}

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

tabbar.attachEvent("onOptionRemove", function(id, value){
    $$("multiview").removeView(id);
});

Обычно, ID вкладки совпадает с ID компонента.

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

Наверх