use segmented buttons as tabs

[TROSSAB]

Hello,

I'm trying to use the segmented buttons to shift views in my container.
I've tried out the setActiveItem function but i dont quite get it right.

Here is my code:

{            title: 'Historik',
            group: 'Meny',
//            layout: 'vbox', // this makes me see both option 1 and 2..
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                ui: 'dark',
                scrollable: false,
                items: [{
                    xtype: 'spacer'
                },{
                    xtype: 'segmentedbutton',
                    allowDepress: false,
                    items: [{
                        text: 'Option 1',
                        pressed: 'true',
                    },{
                        text: 'Option 2',
                        handler: function() {
                            console.log("pressed 2");
                            
                            /*
                            * - change view something like a tabpanel.
                            */
                            //this.parent.setActiveItem();
                            //Ext.ComponentManager.get("services_id").setActiveItem("option_2");
                        }
                    }]
                },{
                    xtype: 'spacer'
                }]
            },{
                id: 'option_1',
                html: "hello this is the first tab"
            },{
                id: 'option_2',
                html: "hello, this is the second one"
            }]

Any help would be appreciated. Thanks.

[haduki]

{
   // you container
   layout:'card',
   id:'YOUR_CONTAINER_ID',
   items:[
      {
         //toolbar
         items:[
             {
                 //segmentedbutton
                 items:[  
                     {
                       //your button
                       text: 'Option 2',
                       handler: function() {
                           console.log("pressed 2");
                           var container=Ext.getCmp("YOUR_CONTAINER_ID");
                          //or container = this.getParent().getParent().getParent();
                          //or  container = this.up('xtype of your container')
                          container.setActiveItem("#option_2");
                       }
}
                 ]
             }
         ]
      },
      {
           // your view
           id:'option_1'
      },
      {
           // your view
           id:'option_2'
      }
   ]
}

[TROSSAB]

Thank you, that seems to do the trick with tabs.

But now my other button ends upp in the upper right corner. It was expected to show up in upper left.

my code used is:

slideButton: {
        selector: 'toolbar',
        align: 'left'
},

If I shift "align" to "docked" it shows up on the left.
But the button will now not be centered vertically like with align. - Also the title goes all the way up to the top with the docked property..

It seems the button is added to the right of the last spacer no matter how I try.
I'm using wnielson's slidenavigation plugin btw.

[haduki]

line 207,master,sencha-SlideNavigation / ux / slidenavigation / View.js

 //return parent.add(Ext.merge(me.slideButtonDefaults, config));
return parent.insert(0,Ext.merge(me.slideButtonDefaults, config));

btw ,if you are using st2.0 you should use 'setActiveItem("ID")',not 'setActiveItem("#ID")'

[TROSSAB]

Thank you very much.