javascript - 无法在 sencha tabpanel 中的选项卡上执行操作

Question

我正在尝试使用 sencha 实现在 tabpanel 中单击选项卡时的操作。不知何故，我无法在单击选项卡时收到警报。

这是我的代码。我尝试在不同选项卡上使用处理程序和监听器这两种方法，但我无法使用其中任何一个方法获取警报消息。

Int.views.bottomTabs = new Ext.TabPanel({

        dock: 'bottom',

        tabBar: {
        id:'bottomtab',
            dock: 'bottom',
            ui: 'dark',
            layout: {
                pack: 'center'
            }
        },

            defaults: {
                scroll: 'vertical',
                xtype: 'button'
            },


        items: [
        {
            title: 'Tab1',
        iconCls: 'und',
        handler: function(){
        alert('It is clicked');             

       },
        {
            title: 'Tab2',
            iconCls: 'und',
            listeners: {activate: update},
        },
        {
            title: 'Tab3',
        iconCls: 'und',

        },
        {
        title :'Tab4',
        iconCls: 'und',

         }
        ]
    });
    var update = function() {
    alert('tab2 is clicked');
    }

请帮我看看我哪里做错了。

谢谢，

Answer 1

您想要附加监听器的方式(如果您想内联执行)如下:

items : [
    {
        title     : 'Hello World',
        listeners : {
            activate : function() {
                alert('hello world');
            }
        }
    }, 
    {
        //...
    }
]

您的第二种方法通过调用更新函数不起作用的原因是因为您在实例化 Ext.TabPanel 后声明了更新

如果您想引用一个函数而不是内联编写它，那么您需要在 initComponent() 中定义您的项目(更好的做法)并扩展您的类。

//..
onActivate    : function() {
    alert('hello world');
},
initComponent : function() { 
    this.items = [
        {
            title     : 'Hello World',
            listeners : {
                activate : this.onActivate
            }
        }, 
        {
            //...
        }
    ]
    // apply to superClass
}

您应该阅读 Sencha Touch Class 系统。在您的情况下，这将是 Sencha Touch 1 方式。看看这个系列教程:http://www.onlinesolutionsdevelopment.com/blog/mobile-development/creating-a-sencha-touch-mvc-application-from-scratch-part-1/