1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    Andershj is on a distinguished road

      0  

    Default Answered: How to make a button link to another view?

    Answered: How to make a button link to another view?


    Hi,

    Is there a simple way to make a button, or a "<a></a>", in a panel link to a different view?

    For example a button with the text "contact us" which leads to a contact-view page.

    Also, the view i want the button to link to is not one of my main view, but a sub-view.

    I've tried a few things, but I cant believe it has to be so complicated.

    Thanks In advance.

  2. You are confused. Probably you didn't read the docs.

    Are you using the Ext.Viewport? Are you using Navigationview or Tabpanel?

    In a controller, where you have a ref to the button, and a handler to the tap event of that button, you could do:


    Code:
    ref:{
           theButton:'button[name=thatButton]'
    },
    control:{
          theButton:{
               tap:'theButtonClick'
         }
    },
    theButtonClick : function()
    {
           Ext.Viewport.setActiveItem( {xtype:'one_sub_view_type'} );
    }

  3. #2
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    617
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      1  

    Default


    You are confused. Probably you didn't read the docs.

    Are you using the Ext.Viewport? Are you using Navigationview or Tabpanel?

    In a controller, where you have a ref to the button, and a handler to the tap event of that button, you could do:


    Code:
    ref:{
           theButton:'button[name=thatButton]'
    },
    control:{
          theButton:{
               tap:'theButtonClick'
         }
    },
    theButtonClick : function()
    {
           Ext.Viewport.setActiveItem( {xtype:'one_sub_view_type'} );
    }

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    Andershj is on a distinguished road

      0  

    Default


    I'm very confused, yes.

    I have been reading the docs, but its safe to say that I'm a sencha noob.

    Well, I have a main view which is a tab.Panel. However, the view I'm trying to place the button in is just a ext.Panel and so is the view I'm trying to link to. Is this wrong?

    Hmm okay. I guess I'll give it another try. I'm not completely sure about what to do. Maybe I should install Architect and try making it in that.

  5. #4
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    617
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Architect is like using Dreamweaver to code PHP, you might get something working but you will never know what you did


    Nah actually Archuitect is much better but for the moment you will hardly be able to use it if you don't know the essentials of st2.


    Read everything in here:
    http://docs.sencha.com/touch/2-0/#!/guide


  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    Andershj is on a distinguished road

      0  

    Default


    Yah, I've already realised that! and I kind of hate WYSIWYG editors.

    Guess I'm back to trial and error. But my problem is probably that I dont really know how controllers work.

    I'll report back to you if I get it working.

  7. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    Andershj is on a distinguished road

      0  

    Default


    So, I managed to get your solution working (after wrapping the refs and control in a config).

    Im using this to launch the view:

    PHP Code:
    buttonAbout: function() { Ext.Viewport.setActiveItem( {xtype:'aboutpanel'} );} 

  8. #7
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    617
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      1  

    Default


    Code:
    So, I managed to get your solution working (after wrapping the refs and control in a config), however, when I press the button and go to the desired view the tabBar in the bottom with my navigation is no longer there. How to I get this to remain there when go to the view?
    In my example I was pushing in Ext.Viewport, the global huge container, a new item. If you want to add a new component in the current view but in a sub-container you would do kinda the same just that instead using Ext.Viewport.setActiveItem you would use sub-container-reference.add( {xtype:'sub-view-type'} ). The sub-container-reference can be defined in controller config ref or can be queried on the main-container-ref like this.getMainContainerRef().down('sub-container-type').

  9. #8
    Sencha User alessandronunes's Avatar
    Join Date
    Jul 2012
    Location
    Salvador/BA
    Posts
    11
    Vote Rating
    0
    alessandronunes is on a distinguished road

      0  

    Default Back Button

    Back Button


    I had this same problem. But now I got another: The back Button.

    From the above solution, how to add a Back button that will go back to the previous view?

  10. #9
    Sencha User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    617
    Vote Rating
    28
    Answers
    67
    bluehipy will become famous soon enough bluehipy will become famous soon enough

      0  

    Default


    Back button for a nested view from a sub container of a tab inside a tab panel?!

    What kind of views are you building people?

Thread Participants: 2

Tags for this Thread