ListBox

Список.

Syntax

new ListBox(parent, viewMode)

Parameters

Name Type Description
parent* Element Родительский элемент
viewMode* String Строка со значением режима отображения. Может принимать значения: ‘common’, ‘base’, ‘checking’. Если указать значение ‘checking’, то отобразится список радиокнопок

* Обязательный аргумент.

Usage

Посмотрим, как выглядят различные режимы отображения ListBox.

//js-demo
var simpleItemTemplate = function (context, args) {
    var label = new InfinniUI.Label();
    label.setValue(args.item);
    return label;
};

function createListBox (openMode, isMultiSelect){
    listBox = new InfinniUI.ListBox(null, openMode);
    listBox.getItems().reset(['1', '2', '3']);
    listBox.setItemTemplate(simpleItemTemplate);
    listBox.setMultiSelect(isMultiSelect);

    $listBox = listBox.render();
    $elementForExample.append($listBox);
}

// hiddenCodeStart
var viewModeListBox = new InfinniUI.ListBox(null, 'checking'),
    listBox, checkBox;

viewModeListBox.getItems().reset([
    'common',
    'base',
    'checking'
]);

viewModeListBox.onValueChanged(function(context, args) {
    if ($listBox){
        $listBox.remove();
    }

    createListBox(args.newValue, checkBox.getValue());
});

viewModeListBox.setItemTemplate(simpleItemTemplate);

var $viewModeListBox = viewModeListBox.render(), $listBox;
$elementForExample.append($viewModeListBox);

checkBox = new InfinniUI.CheckBox();
checkBox.setText('MultiSelect');
checkBox.setValue(true);
checkBox.onValueChanged(function (context, args){
    if(listBox) {
        listBox.setMultiSelect(args.newValue);
        $listBox.remove();
        $listBox = listBox.render();
        $elementForExample.append($listBox);
    }
});

var $checkBox = checkBox.render();
$elementForExample.append($checkBox);

viewModeListBox.setValue('common');
// hiddenCodeStop

Methods

Нет

Events

Нет

ListBox.metadata

Метаданные типа ListBox.

Properties

Name Type Default Description
ViewMode String common Режим отображения списка. Может принимать значения: ‘common’, ‘base’, ‘checking’.

Examples

{
  "ListBox": {
    "Name": "ChildrenList",
    "ItemTemplate": {
        "Label": {
          "Value": {
            "Source": "MainDataSource",
            "Property": "$.Childrens.#.Name"
          }
        }
    },
    "Items": {
      "Source": "MainDataSource",
      "Property": "$.Childrens"
    }
  }
}