In this article, I’m explaining the events in list component in sencha touch 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 is activated. |
activeitemchange | Fires when the activeItem configuration 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 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 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 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 and set store through store configuration, add a toolbar to the list for heading purpose and also add two events itemswipe and itemtaphold.
Ext.define('MyApp.view.ColorList', {
extend: 'Ext.dataview.List',
config: {
store: 'colorStore',
itemTpl: [
'<div>{name}</div>'
],
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: [
'<div>{name}</div>'
],
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:
Leave Comment