---
title: "Events in List Component in Sencha Touch"
description: "In this article, I’m explaining the events in list component in sencha touch and how to use it in our application."
author: "Sumit Kesarwani"
published: 2013-06-13
updated: 2020-01-06
canonical: https://www.mindstick.com/articles/1326/events-in-list-component-in-sencha-touch
category: "sencha touch"
tags: ["sencha touch"]
reading_time: 9 minutes
---
# Events in List Component in Sencha Touch
In this article, I’m explaining the events in list [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) in [sencha touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme) and how to use it in our application.\
If you want to learn first how to create a simple then you can read my previous article on list component:
http://www.mindstick.com/Articles/d6eaa43d-649b-4da3-a450-000fce8c2ae3/?List%20in%20Sencha%20Touch\
http://www.mindstick.com/Articles/0e03392f-fe6c-46dc-a1d9-bc7536704749/?Index%20Bar%20in%20Sencha%20Touch\
##### Events in List Component:
| ## Event Name | ## Description |
| --- | --- |
| activate | Fires whenever item within the [Container](https://www.mindstick.com/forum/34127/extjs-how-to-set-border-for-the-container) is activated. |
| activeitemchange | Fires when the activeItem [configuration](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer) is changed by setActiveItem. |
| bottomchange | Fires when the bottom configuration is changed by setBottom. |
| centeredchange | Fires when the centered configuration is changed by setCentered. |
| deactivate | Fires whenever item within the Container is deactivated. |
| deselect | Fires whenever an item is deselected. |
| destroy | Fires when the component is destroyed. |
| disabledchange | Fires when the disabled configuration is changed by setDisabled. |
| disclose | Fires whenever a [disclosure](https://answers.mindstick.com/qa/35119/which-film-is-similar-to-disclosure) is handled. |
| dockedchange | Fires when the docked configuration is changed by setDocked. |
| erased | Fires when the component is no longer displayed in the DOM. |
| flexchange | Fires when the flex configuration is changed by setFlex. |
| floatingchange | Fires whenever there is a change in the [floating](https://www.mindstick.com/articles/85595/how-to-troubleshoot-when-your-floating-pond-fountain-is-not-working-properly) status of a component. |
| fullscreen | Fires whenever a Component with the fullscreen config is instantiated. |
| heightchange | Fires when the height configuration is changed by setHeight. |
| hiddenchange | Fires when the hidden configuration is changed by setHidden. |
| hide | Fires whenever the Component is hidden. |
| initailize | Fires when the component has been initialized. |
| itemdoubletap | Fires whenever an item is doubletapped. |
| itemsingletap | Fires whenever an item is singletapped. |
| itemswipe | Fires whenever an item is swiped. |
| itemtap | Fires whenever an item is tapped. |
| itemtaphold | Fires whenever an item's taphold event fires. |
| itemtouchend | Fires whenever an item is touched. |
| itemtouchmove | Fires whenever an item is moved. |
| itemtouchstart | Fires whenever an item is touched. |
| leftchange | Fires when the left configuration is changed by setLeft. |
| maxheightchange | Fires when the maxHeight configuration is changed by setMaxHeight. |
| maxwidthchange | Fires when the maxWidth configuration is changed by setMaxWidth. |
| minheightchange | Fires when the minHeight configuration is changed by setMinHeight. |
| minwidthchange | Fires when the minWidth configuration is changed by setMinWidth. |
| painted | Fires whenever this Element actually becomes visible (painted) on the screen. |
| refresh | Fires whenever the DataView is refreshed. |
| rightchange | Fires when the right configuration is changed by setRight. |
| scrollablechange | Fires when the scrollable configuration is changed by setScrollable. |
| select | Fires whenever an item is selected. |
| selectionchange | Fires when a [selection](https://www.mindstick.com/blog/60/populate-records-in-second-listbox-according-to-the-selection-in-first-list-box) changes. |
| show | Fires whenever the Component is shown. |
| topchange | Fires when the top configuration is changed by setTop. |
| updatedata | Fires whenever the data of the component is updated. |
| widthchange | Fires when the width configuration is changed by setWidth. |
##### Example-1 : ItemSwipe & ItemTapHold Event
##### Step-1:
First create a store with only one field name and add data through data configuration.
```
Ext.define('MyApp.store.ColorStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
name: 'Red'
},
{
name: 'Green'
},
{
name: 'Yellow'
},
{
name: 'Blue'
},
{
name: 'White'
},
{
name: 'Black'
}
],
storeId: 'colorStore',
fields: [
{
name: 'name'
}
]
}
});
```
Step-2:
Now add a list to [your project](https://www.mindstick.com/forum/156583/best-way-to-link-bootstrap-file-in-your-project) and set store through store configuration, add a toolbar to the list for heading purpose and also [add two](https://www.mindstick.com/forum/480/add-two-number) events itemswipe and itemtaphold.
```
Ext.define('MyApp.view.ColorList', {
extend: 'Ext.dataview.List',
config: {
store: 'colorStore',
itemTpl: [
'{name}
'
],
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Color List'
}
],
listeners: [
{
fn: 'onListItemSwipe',
event: 'itemswipe'
},
{
fn: 'onListItemTaphold',
event: 'itemtaphold'
}
]
},
onListItemSwipe: function(dataview, index, target, record, e, eOpts) {
Ext.Msg.alert('Item Swipe Event',record.data.name);
},
onListItemTaphold: function(dataview, index, target, record, e, eOpts) {
Ext.Msg.alert('Item Tap Hold Event',record.data.name);
}
});
```
Output
When you hold the item then the itemtaphold event will fire and you will get the following message:
When you swipe the item then the itemswipe event will fire and you will get the following message:
##### Example-2: ItemSingleTap & ItemDoubleTap Event
##### Step-1:
First create a store with only one field name and add data through data configuration.
```
Ext.define('MyApp.store.ColorStore', {
extend: 'Ext.data.Store',
config: {
data: [
{
name: 'Red'
},
{
name: 'Green'
},
{
name: 'Yellow'
},
{
name: 'Blue'
},
{
name: 'White'
},
{
name: 'Black'
}
],
storeId: 'colorStore',
fields: [
{
name: 'name'
}
]
}
});
```
Step-2:
Now add a list to your project and set store through store configuration, add a toolbar to the list for heading purpose and also add two events itemsingletap and itemdoubletap.
```
Ext.define('MyApp.view.ColorList', {
extend: 'Ext.dataview.List',
config: {
store: 'colorStore',
itemTpl: [
'{name}
'
],
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Color List'
}
],
listeners: [
{
fn: 'onListItemDoubletap',
event: 'itemdoubletap'
},
{
fn: 'onListItemSingletap',
event: 'itemsingletap'
}
]
},
onListItemDoubletap: function(dataview, index, target, record, e, eOpts) {
Ext.Msg.alert('Item Double Tap Event', record.data.name);
},
onListItemSingletap: function(dataview, index, target, record, e, eOpts) {
Ext.Msg.alert('Item Single Tap Event', record.data.name);
}
});
```
Output
When you tap once on the item then the itemsingletap event will fire and you will get the following message:
When you tap twice on the item then the itemdoubletap event will fire and you will get the following message:
---
Original Source: https://www.mindstick.com/articles/1326/events-in-list-component-in-sencha-touch
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.