Intermediate

Работа с Type

Свойство Type позволяет работать с каждым элементом компонента отдельно - указывать его размеры, определять CSS класс, задавать темплейт. Также вы можете описать общие для всех элементов параметры.

Type к следующим компонентам данных:

type элемента, это объект, который включает в себя параметры элемента. Эти параметры могут быть как нативными, так и пользовательскими.

Нативные свойства описаны в разделе с API и могут варьироваться от компонента к компоненту. Свойства могут включать:

В примере ниже показано, как вы можете изменять размер самого dataview, а также его ячеек.

webix.ui({
    view: dataview,
    width: 550,
    data: ... ,
    type:{ 
        template: "<div class='rank'>#rank#.</div><div class='title'>#title#</div>",
        width: 261,
        height: 90,
        css: "movie"
    }
});

Related sample:  Template as a String

В то же время вы можете определить type с помощью конструктора webix.type и затем применить его к необходимому компоненту:

webix.type(webix.ui.dataview,{
    name:"typeA",
    template: "<div class=''>#rank#.</div><div class='title'>#title#</div>",
    width: 261,
    height: 90,
    css: "movie"
});
 
webix.ui({
    view: "dataview",
    type: "typeA", // имя первого объекта создано выше
    ...
});

Related sample:  Named Templates

Как указать общие элементы

Определить общие элементы можно следующими способами:

  • {common.property} - позволяет добавить постоянное значение всем темплейтам элементов данных:
webix.ui({
    view:"list",
    template:"{common.itemIcon} #rank#. #title#",
    type:{
        itemIcon:"<span class='webix-icon fa-film'></span>"
    } 
});
  • {common.method()} - позволяет добавить результат вызова функции в темплейт:
webix.ui({
    view:"list",
    template:"#rank#. #title# {common.itemYear()}",
    type:{
        itemYear:function(obj, common){
            if(obj.year>=2000){
                return "<span class='newtime'>"+obj.year+"</span>";
            } else if(obj.year<1970){
                return "<span class='oldtime'>"+obj.year+"</span>";
            } else
                return obj.year;
        }
    }
});

Related sample:  List: Advanced Template

Функция type принимает объект элемента в качестве параметра, так что все свойства элемента доступны внутри функции.

У DataTable и TreeTable уже есть общие элементы по умолчанию.

Как переопределить элементы темплейта по умолчанию

Вы можете полностью поменять внешний вид компонента внутри type, изменив HTML элементов. Что можно определять:

  • template - стандартный темплейт элемента. Можно использовать вне конфигурации type. Включает в себя свойства данных с #хэш# символах, а также необязательные HTML тэги.
  • templateStart - контейнер для элемента. Оборачивает элемент, указанный темплейтом. Открывающий элемент. Должен содержать атрибут webix_l_id, который позволяет найти элемент по его ID;
  • templateEnd - закрывающий элемент для templateStart.

Другими словами, HTML содержимое каждого элемента данных содержит templateStart - template - templateEnd. TemplateStart и templateEnd обычно не меняют, но такая возможность есть.

Вот так можно переопределить стандартный компонент list:

webix.ui({
   view:"list",      
   type:{
      templateStart:"<div webix_l_id='#id#' class='custom_item'>",
      template:"#rank#. #title#<br><div style='text-align:right;'>#year#</div>",
      templateEnd:"</div>"
   }
});

Related sample:  List: Advanced Template

Наверх