Sencha Touch:列表不会触发itemtap

时间:2013-08-27 01:25:58

标签: list extjs touch

我正在使用Sencha touch构建一个小型演示应用程序: 我遇到了列表显示的问题,然后是itemtap甚至触发。我在之前的应用程序中使用了这个但是无法找出它在当前应用程序中没有触发的原因 我在视图中,在控制器中添加了itemtap方法作为侦听器,但它们都没有触发。关于我缺少的任何想法?

在此先感谢您的帮助。 PS

Main.js

Ext.define('KapselApp.view.Main', {
    extend: 'Ext.navigation.View',
    xtype: 'mainview',
    requires: [
        'KapselApp.view.ExpApproval',
        'KapselApp.view.ExpApproval.Details',
        'KapselApp.view.ExpApproval.Confirm'
    ],
    config: {
        autoDestroy: false,

        navigationBar: {
            ui: 'sencha',
            items: [
                {
                    xtype: 'button',
                    id: 'editButton',
                    text: 'Edit',
                    align: 'right',
                    hidden: true,
                    hideAnimation: Ext.os.is.Android ? false : {
                        type: 'fadeOut',
                        duration: 200
                    },
                    showAnimation: Ext.os.is.Android ? false : {
                        type: 'fadeIn',
                        duration: 200
                    }
                },
                {
                    xtype: 'button',
                    id: 'saveButton',
                    text: 'Save',
                    ui: 'sencha',
                    align: 'right',
                    hidden: true,
                    hideAnimation: Ext.os.is.Android ? false : {
                        type: 'fadeOut',
                        duration: 200
                    },
                    showAnimation: Ext.os.is.Android ? false : {
                        type: 'fadeIn',
                        duration: 200
                    }
                }
            ]
        },
        items: [
            { xtype: 'expApprovals' }
        ]
    }

});

ExpApproval.view

Ext.define('KapselApp.view.ExpApproval', {
    extend: 'Ext.dataview.List',
    xtype: 'expApprovals',
    config: {
        title: 'Expense Approval',
        cls: 'x-ExpApprovals',
        items: [{
                xtype: 'list',
                //id: 'expApproval',
                store: expApprovals,
                itemTpl: ['<div class="headshot" style="background-image:url(ExpType.Images/blue_btn_left.png);"></div>',
                        'From:{UserName} {WorkItem}',
                        '<div>Subject:{SUBJECT}</div>'
                ],
                listeners: {
                    itemtap: function(view, index, item, e){
                        alert ('itemtap 1');
                    }
                }
        }],
        itemtap: function(me, index, target, record){
                   alert ('itemtap');
                    //do other logic here

        }
    },
    initialize: function() {
        console.log ('KapselApp.view.ExpApproval:initialize: ');

    }
});

控制器

Ext.define('KapselApp.controller.ExpApprovalApplication', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            main: 'mainview',
            editButton: '#editButton',
            expApprovalDetails: 'expapproval-details',
            expApprovalList: 'expApprovals',
            confirmExpApprovals: 'expapproval-confirm',
            contacts: 'contacts',
            showContact: 'contact-show',
            editContact: 'contact-edit',
            saveButton: '#saveButton'
        },
        control: {
            main: {
                push: 'onMainPush',
                pop: 'onMainPop'
            },
            editButton: {
                tap: 'onContactEdit'
            },
            expApprovalList: {
                itemtap: 'onExpApprovalsSelect'
            },
            saveButton: {
                tap: 'onContactSave'
            },
            editContact: {
                change: 'onContactChange'
            },
            'expApproval list' : {itemtap: 'onExpApprovalsSelect'},
        }
    },
onExpApprovalsSelect: function(list, index, node, record) {
        alert ('onExpApprovalsSelect');
}
}

1 个答案:

答案 0 :(得分:7)

好的..找到了解决问题的方法。你犯了同样的错误。你覆盖列表视图中的initialize方法而不调用initiallize方法“this.callParent()”。通过在我的代码中添加这个事件开始触发。我相信它会适用于你的。

所以你的List初始化处理程序应该是这样的:

    initialize: function(){
        console.log('eventsView being initialized.');
        this.callParent();
    },

您仍然可以使用下面的代码来检查在类似情况下调试哪些事件以进行调试。

----上一篇文章---- 我面临着类似的问题。我正在扩展Ext.dataview.List并让控制器捕获itemtap事件,但事件似乎没有被触发。

我尝试添加以下代码来捕获所有被触发的事件......该列表似乎触发了show事件和滚动事件,但没有其他如itemtap等......

Ext.define('Override.mixin.Observable', {
override : 'Ext.mixin.Observable',

fireEvent : function(eventName, args) {
    console.log('Event:', eventName, args);
    this.callOverridden(arguments);
    //debugger;
},

fireAction : function(eventName) {
    console.log('Action:',eventName);

    this.callOverridden(arguments);
}
});

尝试添加此代码,看看是否收到了itemtap事件。

如果你取得任何进展,请告诉我。