Hybrid View

  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
    Answers
    64
    Vote Rating
    20
    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
    Answers
    64
    Vote Rating
    20
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi