Sencha touch list itemtap after view change

Question

In sencha touch application I got views, one of them contains a list.

If I switch from the view which contains the list to another view and back, the list itemtap event not fires again.

My view with the list:

Ext.define('app.view.ItemList', {
extend: 'Ext.navigation.View',
xtype: 'listitems',

config: {
    title: 'List',

    items: [
    {
        xtype: 'toolbar',
        ui: 'light',
        docked: 'top',
        title: 'List',
        items: [
            {
                xtype: 'button',
                text: 'Back',
                ui: 'back',
                handler: function() {

                    Ext.Viewport.animateActiveItem({xtype:'main'}, {type:'slide'});
                }
            },
        ]
    },
    {
        xtype: 'list',
        itemTpl: '{"name"}',
        store: {
            autoLoad: true,
            fields: ['name', 'email'],
            proxy: {
                type: 'rest',
                url: 'data/data.json',
                reader: {
                    type: 'json'
                }
            }
        }
    }]
},
initialize: function() {

    this.callParent();
}
})

Controller for this:

Ext.define('app.controller.Main', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        listitems: 'listitems'
    },
    control: {
        'listitems list': {
            itemtap: 'showItem',
        }
    }
},
showItem: function(list, index, element, record) {

    this.getItemlist().push({

        xtype: 'panel',
        title: record.get('name'),
        html: [
            "<b>Name:</b> " + record.get('name') +
            "<b>Email:</b> " + record.get('email')
        ],
        scrollable: true,
        styleHtmlContent: true
    })
 }
 })

I tried it also with id, itemId, nothing worked.

How could I solve this?

Are you sure that the tap event does not fire again? What does your showItem function contain, I hope it is just sth like console.log('tapped')? — Alexander
Which version of ST are you using, and would you mind to put a minimal example into "sencha fiddle"? — Alexander
You got the point, I checked in console and it fires everytime so the problem was with the showItem function. I updated the question to show the function. — endlessC
Solved it other way, but I'm curious about what was the problem. — endlessC
What is getItemlist() returning? I've never seen any code like that (at least not working) anywhere. Normally you would Ext.create a view. — Alexander

Alexander Alexander · Accepted Answer · 2014-09-03T13:10:23

Please try sth like this:

this.getItemlist().push(
    Ext.create('Ext.panel.Panel,{
        title: record.get('name'),
        html: [
            "<b>Name:</b> " + record.get('name') +
            "<b>Email:</b> " + record.get('email')
        ],
        scrollable: true,
        styleHtmlContent: true
    })
)

and don't forget to use getItemlist().pop() when back button is clicked! In my app, the back button did not (or not always) remove the view on top of the stack. It gets even worse when adding loadmasks and ActionSheets.

Sencha touch list itemtap after view change

1 Answers