Class “Cell”
Object > NativeObject > Widget > Composite > Cell
This widget is expected by ListView as a child (in JSX) or return value of createCell. It supports data-binding via JSX by default. Its children can also not be selected from the outside, except for using apply directly on the instance. This allows using it as a function component as demonstrated in this example.
| Type: | Cell<ItemType> extends Composite |
| Generics: | ItemType: any |
| Constructor: | public |
| Singleton: | No |
| Module: | tabris-decorators |
| Direct subclasses: | None |
| JSX Support: | Element: <Cell/>Parent Elements: <ListView/>Child Elements: Any standalone widget element |
Examples
JSX
contentView.append(
<ListView stretch items={items}>
<Cell padding={8} height={52}>
<TextView centerY bind-text='item.text' font='24px'/>
</Cell>
</ListView>
);
Constructor
new Cell(properties?)
| Parameter | Type | Description |
|---|---|---|
| properties | Properties<Cell> |
Sets all key-value pairs in the properties object as widget properties. Optional. |
Properties
item
The ListView item currently assigned to this cell. Child elements of <Cell> can bind properties to it used the bind-<widgetProperty>='item.itemProperty syntax.
| Type: | ItemType |
| Settable: | No |
| Change Event: | itemChanged |
itemCheck
A callback that must return true for any item this cell can display. This is used to determine which <Cell> template to use when multiple are given in a <ListView> element. May be used instead or in addition to itemType.
Setting this property also enables runtime item type checks, so it can be useful to set it even if only one <Cell> element is present.
**This property only has an effect when Cell is used as an JSX child element of ListView.
| Type: | (value) => boolean |
| Default: | null |
| Settable: | Yes |
| Change Event: | itemCheckChanged |
itemIndex
The index (within the items of ListView) of the item currently assigned to this cell.
| Type: | number |
| Settable: | No |
| Change Event: | itemIndexChanged |
itemType
The class (constructor) or name (typeof value) of the item type this cell can display. This is used to determine which <Cell> template to use when multiple are given in a <ListView> element. May be used instead or in addition to itemCheck.
Setting this property also enables runtime item type checks, so it can be useful to set it even if only one <Cell> element is present.
**This property only has an effect when Cell is used as an JSX child element of ListView.
| Type: | Constructor |
| Default: | null |
| Settable: | By Constructor or JSX |
| Change Event: | Not supported |
This property can only be set via constructor or JSX. Once set, it cannot change anymore.
selectable
If set to true (e.g. <Cell selectable>), the cell will trigger the select event of ListView when tapped.
Alternatively, any of the static ListView select trigger methods can be registered as listeners of any event of Cell or its child elements. This allows select events to be triggered on more specific user interactions.
**This property only has an effect when Cell is used as an JSX child element of ListView.
| Type: | boolean |
| Default: | false |
| Settable: | By Constructor or JSX |
| Change Event: | Not supported |
This property can only be set via constructor or JSX. Once set, it cannot change anymore.
Change Events
itemChanged
Fired when the item property has changed.
EventObject Type: PropertyChangedEvent<Cell, ItemType>
| Property | Type | Description |
|---|---|---|
| value | ItemType |
The new value of item. |
itemIndexChanged
Fired when the itemIndex property has changed.
EventObject Type: PropertyChangedEvent<Cell, number>
| Property | Type | Description |
|---|---|---|
| value | number |
The new value of itemIndex. |
itemCheckChanged
Fired when the itemCheck property has changed.
EventObject Type: PropertyChangedEvent<Cell, Function>
| Property | Type | Description |
|---|---|---|
| value | (value) => boolean |
The new value of itemCheck. |
