1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    Sweden
    Posts
    7
    Vote Rating
    0
    TROSSAB is on a distinguished road

      0  

    Default Answered: use segmented buttons as tabs

    Answered: use segmented buttons as tabs


    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:
    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.

  2. Code:
    {
       // 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'
          }
       ]
    }

  3. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Vote Rating
    20
    Answers
    64
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    Code:
    {
       // 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'
          }
       ]
    }
    I write English by translator.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    Sweden
    Posts
    7
    Vote Rating
    0
    TROSSAB is on a distinguished road

      0  

    Default


    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:
    Code:
    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.

  5. #4
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Vote Rating
    20
    Answers
    64
    haduki will become famous soon enough haduki will become famous soon enough

      0  

    Default


    line 207,master,sencha-SlideNavigation / ux / slidenavigation / View.js
    Code:
     //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")'
    I write English by translator.

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    Sweden
    Posts
    7
    Vote Rating
    0
    TROSSAB is on a distinguished road

      0  

    Default


    Thank you very much.

Thread Participants: 1

Tags for this Thread