Sencha Touch 2 list itemtap not working when coming back from edit form

Question

I followed this tutorial on how to use Sencha Touch 2 with Architect and an ASP.NET MVC 4 WebApi backend : https://vimeo.com/45207356# Everything works but a simple thing. As soon as I get back from the detail form, the itemtap event listner doesn't seem to work anymore. No matter if I save, delete or just hit the back button, as soon as I get back in the main view (the one with the list), there is no way I can get to the edit form again. Here is the main view code :

Ext.define('ClientTestApi.view.Main', {
extend: 'Ext.navigation.View',

config: {
    id: 'Main',
    items: [
        {
            xtype: 'list',
            title: 'Songs',
            id: 'ListePieces',
            itemTpl: [
                '<div>{Title}, {Artist}, {Album}, {Genre}, {Year}</div>'
            ],
            loadingText: 'Chargement...',
            store: 'PieceStore'
        }
    ]
}

});

And the controller :

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

config: {
    refs: {
        mainView: '#Main',
        formPiece: '#FormPiece',
        listePieces: '#ListePieces'
    },

    control: {
        "#ListePieces": {
            itemtap: 'onListItemTap'
        }
    }
},

onListItemTap: function(dataview, index, target, record, e, options) {
    var form = Ext.create('ClientMusiqueApi.view.FormPiece',
    {
        title: record.data.Titre
    });

    this.getMainView().push(form);
    form.setRecord(record);
}

I ommited the save and delete code since the behavior happens also when you just hit the back button without doing anything.

So when I load the app, everytihing works. I click on an item and gets to the edit form ("FormPiece"). When I go back (with back button in the navigation bar for exemple), the list is diplayed OK, the items are selected when I click them, but it doesn't open the edit form this time. Does anyone know why ?

UPDATE : After a simple test (I put an alert in the onListItemTap event), I saw that the event is fired even after I come back. The problem seems to be with the "push()" method. But when I trace it in Chrome's console, it runs OK. It won't show the edit form for no apparent reason.

score 2 · Answer 1 · edited Jun 24 '13 at 08:50

All those who want to put list in sencha and there listeners are not working on the list then do not forget to check what you are extending see following code and rest in peace , because it took me 5 days to resolve the issue . Nowhere I could find whats missing in the code ,,,, so missing snippet was " extend:'Ext.navigation.View' :

Ext.define('iPhoneTestApp.view.Inbox', {
    extend: 'Ext.navigation.View',
    xtype: 'inbox',
    inline: true,
    requires: [ 'Ext.*','Ext.dataview.List' ],
    config: {
            items : [{
                        xtype: 'list',
                        inline: true,
                        id:'list',
                        itemTpl: '<div class="contact">{title} </div>',
                        data: [
                                { title: 'Item 1' },
                                { title: 'Item 2' },
                                { title: 'Item 3' },
                                { title: 'Item 4' }
                            ],
                        fullscreen: true,
                        listeners: {
                            itemtap: function(el){
                                Ext.Msg.alert('Warning', '3', Ext.emptyFn);
                            }
                        }
                }]
        }
});

score 0 · Answer 2 · answered Jan 18 '13 at 16:36

0

Turned out the problem was the edit form itself. I added the record "id" field in the form and it seems to be what was causing the error. So if you just follow the video as is, it'll work.

answered Jan 18 '13 at 16:36

Patrice Cote

3,572
12
43
72

Sencha Touch 2 list itemtap not working when coming back from edit form

2 Answers2