articles

Home / DeveloperSection / Articles / Events in List Component in Sencha Touch

Events in List Component in Sencha Touch

Sumit Kesarwani10300 13-Jun-2013

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

Events in List Component in Sencha Touch

When you hold the item then the itemtaphold event will fire and you will get the following message:

Events in List Component in Sencha Touch

When you swipe the item then the itemswipe event will fire and you will get the following message: 

Events in List Component in Sencha Touch

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

Events in List Component in Sencha Touch

When you tap once on the item then the itemsingletap event will fire and you will get the following message:

Events in List Component in Sencha Touch

When you tap twice on the item then the itemdoubletap event will fire and you will get the following message:

Events in List Component in Sencha Touch

 


Updated 06-Jan-2020

Leave Comment

Comments

Liked By