Природа Webix компонента

Все Webix компоненты, они же views, наследуются от View. У этого класса есть API, которое и наследуют все компоненты: отрисовка, видимость, изменение размеров, различные хелперы.

View не предназначен для прямого использования. Вместо этого, в вашем распоряжении более 100 компонентов, которые инициализируются в конструкторе webix.ui:

Один компонент

webix.ui({
    view:"dataview",
    data: list_data
});

Компоненты (или views) можно помещать в другие, например Layout, и таким образом создавать комплексную структуру с родительскими и дочерними компонентами:

Компоненты в лейауте

webix.ui({
    rows:[
        { view:"toolbar", cols:[ /*buttons*/ ]},
        { view:"dataview", data:list_data }
    ]
});

Экземпляр компонента

Любой компонент можно представить как абстрактный класс. Как только он создан, мы имеем дело с экземпляром компонента (он же view).

Вы можете получить экземпляр самого верхнего компонента, вернув его значение в webix.ui:

var app = webix.ui({ rows:[/* компоненты */]});

Вы можете пройтись вверх и вниз по иерархии компонентов:

// спускаемся вниз
var rows = layout.getChildViews(); // массив объектов
// поднимаемся вверх
var toolbar = button.getParentView(); // объект тулбара

Вы также можете найти компоненты по какому-либо критерию, используя queryView:

var button = toolbar.queryView("button"); // объект кнопки

ID Компонента

Для взаимодействия с компонентами, можно указать им уникальный ID в объекте конфигурации:

webix.ui({
    rows:[
        { view:"list", id:"order-list"}, 
        { view:"list", id:"data-list"} 
    ]
});

После чего вы сможете получать экземпляры этих компонентов с помощью метода $$:

var list1 = $$("order-list");      // глобально
var list2 = webix.$$("data-list"); // или используя пространство имён webix

Если же вы не укажите ID, то он автоматически сгенерируется по шаблону "$component_name1" для каждого экземпляра компонента.

Вы можете получить указанный или сгенерированный ID через свойство компонента config, которое содержит и пользовательские, и настройки по умолчанию:

Сгенерированный ID

var list = webix.ui({
    view:"list",
    // другие настройки
});
 
var listId = list.config.id; // $list1 - автоматический ID
 
$$(listId).select(5);

Related sample:  Auto-Generated ID

Однако мы не рекомендуем использовать авто-ID напрямую (как на примере выше: $$("$list1")). Это небезопасно, потому что такие ID могут менятся в случае нового экземпляра одного и того же компонента, добавленного в приложение.

Резюмируем:

  • Указывать ID компонентов необязательно, но желательно. Он должен быть уникальный во избежание ошибок;
  • Доступ к ID компонента можно получить через view.config.id;
  • ID Компонентов отображаются в HTML как атрибут view_id у самого верхнего блока (div) компонента;
  • Использование авто-сгенерированных ID напрямую небезопасно, так как они могут меняться динамически.

Компонент-плейсхолдер

Среди компонентов Webix есть плейсхолдер/спейсер - Spacer. Его можно использовать для создания пустой зоны между другими компонентами, напрмиер, чтобы выровнять их.

Всего лишь с помощью двух фигурных скобок ({}) можно инициализировать спейсер, а указывать имя необязательно. Вы можете задать ему ширину, высоту или удельный размер, если требуется.

Выравниваем кнопки на тулбаре

webix.ui({
    view:"toolbar", cols:[
        { view:"button", value:"but1"}, // слева
        { },
        { view:"button", value:"but2"}  // справа
    ]
})

HTML в компонентах

Если вам нужно добавить какой-либо текст или HTML внутрь Webix лейаута, используйте компонент Template:

{
    view:"template", // указывать необязательно
    template:"<b>Hello<b>, world!"
}

Related sample:  Default Template

Вы также можете задать более сложные темплейты для элементов таблиц, списков и прчоего. Основные правила при создании темплейтов описаны здесь.

Компоненты в HTML

Компоненты можно помещать в HTML-элементы. Укажите ID HTML-элемента в качестве значения свойства container:

// body документа
<div id="mylayout" style="width:600px;height:400px;"></div> 
 
// скрипты документа
webix.ui({
    view:"layout",
    container:"mylayout",
    rows:[ /*массив компонентов*/ ]
});

У такого подхода есть пара ограничений:

  • внутри HTML можно отрисовать только самый верхний компонент Webix. Помимо этого, компоненты придерживаются своих изначальных размеров;
  • компоненты в HTML сохраняют свои изначальные размеры и не отвечают на изменения размеров экрана.

Базовые методы компонентов

1. getParentView() & getTopParentView()

Методы используются для получения родительского объекта. Можно вызывать на любом компоненте:

webix.ui({
    id:"mylayout", rows:[
        { view:"toolbar", id:"mybar", cols:[
            { view:"button", id:"mybutton" }
        ]},
        { template:"Text"}
     ]
});
 
var t = $$("mybutton").getParentView();    // объект тулбара, "mybar" 
var l = $$("mybutton").getTopParentView(); // объект лейаута, "mylayout"

2. getFormView()

Метод возвращает экземпляр родительской формы, в которой расположен компонент. Метод особенно полезен в случае комплексных форм:

webix.ui({
    view:"form", id:"myform", elements:[
        { view:"text"},
        { cols:[
            { view:"checkbox", id:"mybox"}
        ]},
        { view:"combo", options:["one", "two"]}
     ]
});
 
$$("mybox").getFormView(); // экземпляр формы с ID "myform"

3. getChildViews()

Метод возвращает массив дочерних элементов компонента (Layout, Multiview, Form, и др.).

Например, если внутри Layout у вас есть Toolbar с тремя кнопками, метод вернёт следующее:

var bar = $$("mylayout").getChildViews()[0]; // экземпляр тулбара
var but = $$("mybar").getChildViews()[1]; // экземпляр второй кнопки

4. index()

Как и вышеупомянутый метод, index() работает с компонентами, которые включают в себя другие.

Метод возвращает индекс дочернего компонента по его ID:

webix.ui({
    view:"layout", // указывать необязательно
    id:"mylayout", 
    rows:[
        { id:"cell1", view:"list", ... },
        { id:"cell2", view:"form", ... },
        { id:"cell3", view:"dataview", ... }
    ]
});
 
$$("mylayout").index($$("cell1")); // 0

5. queryView()

Метод поможет найти необходимый компонент в лейауте. В качестве критерии поиска можно передать имя компонента, настройки или функцию:

// возвращает экземпляры всех кнопок на тулбаре
$$("mybar").queryView("button", "all");

6. getNode()

Метод помогает получить HTML-элемент компонента:

webix.ui({
    view:"toolbar", id:"mybar", elements: [/*кнопки*/]
});
 
var box = $$("mybar").getNode();

Также вы можете получить HTML компонента через свойство $view:

var box = $$("mybar").$view; // не изменяйте это свойство

7. getInputNode()

Метод используется с контролами форм (например, Text для получения HTML-элемента области ввода

webix.ui({
  view:"button", id:"mybutton", 
  value:"Login", css:"webix_primary"
});
 
$$("mybutton").getInputNode();

Ознакомьтесь с полным списком методов, параметров и событий View.

Наверх