Skip to content

List

List is a single-selection scrollable list box backed by a <select> element. It extends ComboBox but displays all options simultaneously by sizing the select to fit its item count.

Usage

typescript
import { Event } from '@jimka/typescript-ui/core';
import { Option } from '@jimka/typescript-ui/component/input';
import { List } from '@jimka/typescript-ui/component/list';
const fruits = List();
fruits.addItem(Option('apple',  'Apple'));
fruits.addItem(Option('banana', 'Banana'));
fruits.addItem(Option('cherry', 'Cherry'));
fruits.setPreferredSize(180, 120);

Event.addListener(fruits, 'change', () => {
    console.log('selected:', fruits.getValue());
});

panel.addComponent(fruits);

Store-backed lists

Like ComboBox, List accepts a Store:

typescript
list.setStore(myStore);
list.setDisplayField('name');
list.setValueField('id');

The list refreshes automatically on store events.

See also