我正在创建一个sencha touch应用程序,并且设计需要在标签栏中使用分段按钮。

有简单的方法可以使用sencha内置功能来做到这一点,还是我必须自己创建(添加带有分段按钮的工具栏,并创建所有控件以实际获得相同的效果)?

extend: 'Ext.TabPanel',
requires: [
    'Ext.SegmentedButton',
],
xtype: 'album',
id: 'album',
fullscreen: true,
config: {
    tabBar: {
        layout: {
            pack: 'center',
        },
        items: {
            xtype: 'segmentedbutton',
            allowDepress: false,

            listeners: {
                initialize: function() {
                    Ext.SegmentedButton.implement({
                        setActive: function(activeItem) {
                            this.setActiveItem(activeItem);
                        }
                    });
                }
            }
        }
    },
    autoDestroy: true,
    activeItem: 1,
    items: [
        {
            title: 'HIGHLIGHTS',
            xtype: 'highlightview',
            id: 'highlightView'
        },
        {
            title: 'KATEGORIEN',
            xtype: 'categoryView',
            id: 'categoryView',
        },
        {
            title: 'SUCHE',
            xtype: 'searchView',
            id: 'searchView',
        }
    ],
}

到目前为止,这就是我尝试过的方法。 侦听器可以解决[Object] Object has no method 'setActive'的错误[Object] Object has no method 'setActive' ,但是没有导致我想要的行为。

#1楼 票数:0 已采纳

//take a tap panel and inside the tap panel create panel as a xtype
//give item id to each button in segmented button to create listener and later on assign a //function to it


extend: 'Ext.TabPanel',

requires: [

    'Ext.SegmentedButton'

],

xtype: 'album',

id: 'album',

    enter code here`enter code here`

fullscreen: true,

    config: {
    cls:[
            'styles'
        ],
        scrollable: 'vertical',

        items: [


            {
                xtype: 'panel',
                title: 'Close Case',

                items: [

            {
                        xtype: 'segmentedbutton',
                        allowDepress: true,
                        height: 50,
                        items: [
                            {
                                text: 'Option 1',
                                pressed: true,
                                handler: function() {
                                console.log("Picked #1");
                                alert("foo");
                                itemId: "newButton11"
                                }
                            },
                            {
                                text: 'Option 2',
                                handler: function() {
                                alert("foo");


                                }
                            },
                            {
                                text: 'Option 3',
                                handler: function() {
                                alert("foo");
                                }
                            }
                        ]
                    }
                ]
            }

        ],

        listeners: [

        {

            delegate: "#newButton",
            event: "tap",
            fn: "onNewButtonTap"
        }
    ]

    },

onNewButtonTap: function () {
        //write your function here and it will work
    }




//This is working for me just let me know if it works for you.

在此处输入图片说明

  ask by wiseveri translate from so

未解决问题?本站智能推荐:

1回复

如何在Sencha Touch中交换CSS

我需要交换在Sencha Touch中完成的Mobile应用程序的CSS。 目前,我未获得任何结果。 你能告诉我怎么做吗? 谢谢
1回复

如何在Sencha Touch中更改按钮的尺寸

我在Sencha Touch 2中具有此按钮,我需要将尺寸调整为“小”,我需要更改其高度。 能否请您提供代码示例? 谢谢
1回复

如何将UI“缩放”到可读的大小

当我在设备上显示我的应用程序时,字体,图标和按钮太小了。 在平板电脑上尤其如此。 如何轻松扩展所有UI组件?
1回复

如何处理sencha搜索字段“清除”(X)图标上的点击事件?

我正在尝试处理默认情况下出现在sencha searchfield上的清除按钮的点击事件。 我在sencha文档上找不到监听器来处理该事件。 任何帮助将不胜感激。 我提到了这个话题。 sencha touch textfield清除事件,但我不想显示除searchfield显示的默认
1回复

Sencha触摸主题:如何自定义按钮图标?

我正在尝试使用sass / compass为我的应用程序自定义Sencha touch主题。 但是,我找不到正确设置按钮图标的方法。 无论我是否禁用/启用默认图标,我使用的图标仍然没有显示。 另一个问题是,通过使用上述样式,Ext.Msg.alert消息框丢失了UI,仅显示带有按
2回复

如何在sencha touch中创建自定义工具栏?

我想要一个自定义工具栏,背景色为渐变。 我尝试过无礼。 但仍然无法正常工作。我做了什么,我正在逐步编写它: 我在当前项目中的resources文件夹上创建。 我将主题和图像文件夹保存在那里。 我在资源文件夹中创建了css和sass文件夹。 在sass文件夹中
1回复

如何访问Sencha触摸列表行索引,获取值并应用更改?

我被困在sencha触摸列表中,因此我需要为列表中的行提供备用背景色。 另一个疑问是如何在sencha touch中自定义列表,因为我需要在列表行的中添加文本字段,按钮,图像。 我用html尝试过并且能够做到,有什么办法可以直接将sencha touch对象项添加到列表中。请帮我解决这个问题
1回复

如何在sencha touch2中使横向方向上的垂直选项卡

我在底部有一个水平标签栏,我需要将Bootom水平标签栏更改为横向的垂直标签栏。 我读了很多文章,但仅针对底部和顶部的标签栏位置进行了解释。 我没有关于横向的垂直标签栏位置。 是否可以在sencha touch2中实现? 。 任何人都可以告诉我该如何接受。