1. #1
    Sencha User goldorak's Avatar
    Join Date
    Dec 2012
    Location
    Belgium
    Posts
    9
    Vote Rating
    1
    goldorak is on a distinguished road

      0  

    Default Newbie question(s) for show and showAnimation

    Newbie question(s) for show and showAnimation


    Hello everybody.
    We recently bought Sencha Architect and we are in the middle of creating a project. The project goes well but I am stuck on some very basic issues here. Is there anyone who can shed a light on this.

    1. I created a button inside a panel with the following code applied to its handler: this.hide(true);
    This works fine but I want to change the animation effect to 'slide' instead of 'fade'. Using the API documentation I read you can alter its config options by adding something like {type :"slide",direction : "right", duration : 0}, but where do I place this code? It doesn't work from inside the applied handler.

    2. Secondly, if I -for example- want to hide another element in the same panel using that button? How do I refer to it? I tried adding an itemID or ID and then refer to it by using something like mycontainer.hide(true);

    3. Finally, if I want to add the same simple show/hide code (like above) to -for example- a container containing a graphic element. In other words: make a container clickable. Can I use something similar or do I have to use listeners/functions to achieve that?

    Can someone please get me started on this one?

    Thank you for your time!



  2. #2
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    512
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    Lets break things down a bit. Firstly, some of the answers you're in search of are answered in the well developed guides provided by Sencha. Not only will you find (or learn where to look) by going through these tutorials and videos but you'll learn a whole lot more in the process.

    Architect docs and training materials
    http://docs.sencha.com/architect/2/#!/guide

    Sencha Touch
    http://docs.sencha.com/touch/2-1/#!/guide

    Don't get me wrong. Sencha and their tools take time to grok but once you understand the big picture most everything else quickly falls into place. It took me a while to forget what I knew about server side/html programming (it helps to know but gets in the way).

    1 - Architect exposes the following Touch configs for every container based object (buttons, tabs, panels, images etc..): HideAnimation and ShowAnimation. throw your
    {type :"slide",direction : "right", duration : 0} config into those properties to change how they react when myPanel.show(); is used on them. Read the touch 2.0 docs and you'll discover you can also myPanel.show({type :"slide",direction : "right", duration : 0}); as well.


    2 - to hide another element in the same container, assign that element an itemId such as 'customerPicture'. Then in your button tap do: this.down('#customerPicture').hide(); or this.down('#customerPicture').hide(
    {type :"slide",direction : "right", duration : 0});. To access an element anywhere on the page, regardless of what parent it lives in, start at the top of the DOM by doing an Ext.Viewport.down('#customerPicture').hide(); or go up from your container to it's parent via this.up('#customerPicture').hide(); Which direction you choose to go with is determined by what you're looking for and additionally the performance of the search. There are several more ways to look for elements, this is just one way.


    3 - most, if not all, visual components have tap events or itemTap events you get for free. If you've built something that doesnt offer this event, drop a transparent container on top of it that does have 'tap' or attach an event handler to the dom. Nine times out of ten you wont need to do anything like this. Just use the event exposed by the Touch framework.

    Hope that helps
    John

  3. #3
    Sencha User goldorak's Avatar
    Join Date
    Dec 2012
    Location
    Belgium
    Posts
    9
    Vote Rating
    1
    goldorak is on a distinguished road

      0  

    Default


    Thank you John!
    All works fine now.

    In order to understand the big picture (the way how Sencha Touch framework works, the relation(s) between Controller - View - Stores, etc...) I created some testprojects using only the Sencha Touch framework. Indeed things are much clearer now. I was a little bit eager to get started...

    Thanks again for the help!

    Sven

Thread Participants: 1