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/

无法在sencha tabpanel中的选项卡上实施操作

1 个答案: