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