Class
zebkit.ui.List
extends <zebkit.ui.BaseList> |
<zebkit.ui> |
The class is list component implementation that visualizes zebkit.data.ListModel. It is supposed the model can have any type of items. Visualization of the items is customized by defining a view provider.
The general use case:
// create list component that contains three item
var list = new zebkit.ui.List([
"Item 1",
"Item 2",
"Item 3"
]);
...
// add new item
list.model.add("Item 4");
...
// remove first item
list.model.removeAt(0);
To customize list items views you can redefine item view provider as following:
// suppose every model item is an array that contains two elements,
// first element points to the item icon and the second element defines
// the list item text
var list = new zebkit.ui.List([
[ "icon1.gif", "Caption 1" ],
[ "icon2.gif", "Caption 1" ],
[ "icon3.gif", "Caption 1" ]
]);
// define new list item views provider that represents every
// list model item as icon with a caption
list.setViewProvider(new zebkit.ui.List.ViewProvider([
function getView(target, i, value) {
var caption = value[1];
var icon = value[0];
return new zebkit.ui.CompRender(new zebkit.ui.ImageLabel(caption, icon));
}
]));
zebkit.ui.List
([model], [isComboMode]
)
Parameters:
-
[model]
<zebkit.data.ListModel | Array>a list model that should be passed as an instance of zebkit.data.ListModel or as an array.
-
[isComboMode]
<Boolean>true if the list navigation has to be triggered by pointer cursor moving
public
chainable
setItemGap (g )
Set the left, right, top and bottom a list item paddings Parameters:
|

















private
![]() firstVisible
Index of the first visible list item |
private
![]() firstVisibleY
Y coordinate of the first visible list item |
public
![]() gap
Extra list item side gaps |
private
<Boolean>
visValid
Internal flag to track list items visibility status. It is set to false to trigger list items metrics and visibility recalculation |