0

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

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

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');
    }

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

谢谢，

4

1 回答 1

3

您要附加侦听器的方式（如果您想内联）如下：

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/

于 2012-05-24T18:02:56.957 回答