View Full Version : Can anyone help with setActiveItem method?

30 Jan 2011, 3:51 PM

I'd like to navigate from on tab to the next by click on an image in a carousel of items. I am having difficulty accomplishing this. Does anyone know how this can be done?? :-? In a different thread, someone suggested to use the setActiveItem method, but I would really like to see a working example to know how this is done. Thanks for your help in advance!

30 Jan 2011, 8:52 PM
I was kind of hoping you would look at the API Docs here: http://dev.sencha.com/deploy/touch/docs/?class=Ext.TabPanel

Scroll down to setActiveItem under the Methods.


card can be the Panel instance, the index number, or a config object (using xtype);

31 Jan 2011, 11:27 PM
Thanks again for your reply Mitchell. I have read through the API documentation, but the trouble stems from that I haven't entirely developed a complete understanding of the syntax in sencha touch. An example of the difficulty that I am having is I am not sure in which panel to insert the setActiveItem method to accomplish this task. Since my root panel is an Ext.Tabpanel should I place it there and if so where? Should I even be using an Ext.Tabpanel for this type of method? I still don't have a good understanding of how to link a click on an image in a carousel to activating a different tab. As I previously mentioned, I am used to the direct hyperlinking method of navigating and I still need help with creating navigation based solely in JavaScript. The API docs seem to contain a ton of useful information but only if I knew better of how to apply it. I've reached the stage now in my project where I am entering new territories beyond what is available to learn through senchainc via the tutorials and other learning videos on YouTube. Unfortunately for me there where no tutorials that cover syntax. I am sure that I could learn the best if I could see a working example of a new tab activation so I could visualize how I need to proceed entering the code. Any further help would be greatly appreciated and thanks again.

1 Feb 2011, 2:36 PM
Do you have a link to the current site?

1 Feb 2011, 4:52 PM
Hi joseeight,

Yes I've posted a link to the project at http://www.rdmls.com

Please let me know what you think. :-/ All help with this issue is greatly appreciated!

1 Feb 2011, 6:09 PM

Alright, so don't think it's hard, what you wanted to do didn't need Sencha code to be done. Since you want specific DOM objects (like <img> or <p>) to have the "onClick" action, that's really what you have to do.

Look at my version here: http://eightyearproject.com/sencha/forum/switchcards/

I just made the tabs and panels be "global" variables, so outside the "setup" method. Added a method called via the standard "onClick" available via plain old JavaScript to DOM objects. Passed the tab and card I wanted to switch to, and called the appropriate "setActiveItem" to both the tab and card variables (objects).

Let me know if that works for you and if you need any more help :)

I'm on twitter if you need some quick help there: @joseeight

1 Feb 2011, 7:12 PM
Thank you very much joseeight!!! That is exactly the solution that I was needing. I appreciate your help with this as I have been trying to figure it out now for the past couple of days. As far as my other questions go, I have two main questions so far that I have also been trying to figure out. The first being that I was also having trouble activating the docked items; namely the BottomTabs in my project. At this point I've only been able to have one working tabbar at a time. I've tried adding code inside of the docked items similar to the way that the top tabbar is set up but with no success. Is there any way to have both a top and a bottom tabbar? My second question is I about nested list functionality. I'd like to be able to set a tab that displays a list of articles that a user can click on and then display a story that is vertically scrollable. Can you show me an example of how I could include this in my project? Thanks again for your help joseeight and I really appreciate it a ton!!!

1 Feb 2011, 8:13 PM
You can use the List component for a list: http://dev.sencha.com/deploy/touch/docs/ (Search for "List")

What I would do is use a Carousel with the first card being the List, and the second with an HTML container that you insert the content the user selects from the list. The card of the Carousel should have a "scrollable" property in the direction you would like

I do this on my app: http://renaissancenavigator.com/mobile/touch.html

As far as the BottomTabs, I think you need to understand a bit more about layouts, nesting components, and events sent by those components. I would recommend doing some wireframes of the app, and then looking at the components to see how to nest them and program dependencies.

1 Feb 2011, 8:48 PM
Okay I will give the list idea my best shot. Nice app by the way. I know which hotel I'll stay in the next time I travel out of town. :) As far as the bottomtabs I'll just remove them for the time being until I have a better understanding of layouts, nesting components and events. I'll start with the great advice that you have given me so far and come back to the bottomtabs later. I am super appreciative of your help and thank you very much joseeight!!!

2 Feb 2011, 1:42 PM
No problem, let me know how it works out.

5 Feb 2011, 3:58 PM
Hi Jose,

Can you explain how to set up the html container? :-? I think I understand how to use a carousel as the first card but how do I set up the html container? Your app can scroll up and down vertically without having to jump to the next card and I would like to accomplish this same task. Could you possibly show me a simple example of how its done? Also do you know if it is possible to include an <iframe> within a card and then to have only the contents of the <iframe> scroll? I've set up a demo of a carousel with an <iframe> at http://www.rdmls.com but only the card moves vertically and not the content of the <iframe>. Again, thanks for all your help!!! Ps. I subscribed to your twitter feed also :D

5 Feb 2011, 7:41 PM
Why do you want to use an iFrame?

5 Feb 2011, 9:01 PM
My app is using AJAX to load content and dynamically add it to the carousel. The carousel accepts the simple HTML parameter, which I see you used for the iFrame. I then used CSS to set the layout of that content. You must update the content using the .doLayout() method to re-render the content if you insert it dynamically.
See this: http://eightyearproject.com/sencha/forum/renderto/
That example shows how you can use the html parameter to insert content and CSS to style and fit it. The "scroll" and "layout" parameters allow you to do what you are looking for, scroll tells Sencha that your container can be scrolled, remember, that a card in the Carousel is just a simple container, so these properties apply to each card individually.
I used a bit of complex set up for my app, but in simplicity: I used the carousel layout to hold an array of containers. The containers are just each card of the carousel, which I then insert my own container with my own CSS properties. I used AJAX and plain JavaScript to populate the container. The container is just a <div> and I add standard HTML to it (See my example above, and see the text, imagine it is just plain HTML and all it's elements).

I'm still wondering about why you want to use an iFrame, give me more details and I'll help you get it going, and let me know if I wasn't clear above, I know it's a bit overwhelming at first. Here is a hint, if you want the iFrame to be scrollable, you must make the container be the full width and height of the iFrame, because the carousel itself will act as a window when you enable scrolling. Do you understand the different between a "viewport" and "window"?
Mobile devices when scrolling don't actually scroll, they actually move the viewport, hence you can't really scroll transitional things like nesting scrolling (iFrame, or DIVs). My example above also shows you how to render a Sencha container into plain HTML or any other container and make it scrollable within it's own limits, which you can do nest just like a fake iFrame. So, why the iFrame? haha

6 Feb 2011, 9:23 AM
Good Morning Jose!!! Thanks for the example!! The reason that I want to use an <iframe> is to include a registration page that has already been built in regular HTML. I'm still trying to figure it out but I'm thinking that this will save me the time of having to create a mobile version of the registration page. I'd really like to learn AJAX also, (there's alot that I want to learn) :"> but I'm going to take it one solution at a time of course. As for the difference between a viewport and a window I don't think that I fully understand the differences yet but I'm going to research it. The pointers that you have given to me are great! I'll try to put what I can together and send you a link to the project so you can see where I'm at from that point. You really have been a ton of help and thanks!!!

6 Feb 2011, 9:49 AM
I see, well, you should be able to use the iFrame, what you have to keep in mind is that you will have to set the iFrame width and height to the full dimensions of it, so the container can scroll it around. I don't see it being a problem. You can also use the CSS selectors to style the content on the iFrame to make it more mobile friendly. Try to read up on viewports and windows, understanding that will solve this scrolling logic for you.

8 Feb 2011, 8:17 AM
Hi Jose, I'm not having any success with the <iframe> issue. I see that you were able to get it to work in your demo, but I can't figure it out with the panels that I have already created. The problem I think is that I can't figure out how to integrate the <div> and the panels simultaneously. :-? When I do it, only the <div> is displayed and none of the other panels are displayed at all. I've posted a link to where I'm at in my project up to this point for you to see. I'm trying to have the content of the tab titled tee times to be a scrollable <iframe> like you did in the demo.


10 Feb 2011, 10:08 AM
Sorry, I've been really busy with work, so didn't have time to help. Where are you now with this?

10 Feb 2011, 12:33 PM
Hi Jose,

I'm still trying to get it started. I can't seem to display the <div> at the same time as the panels that have already been created. When I do it it is either one or the other. That's basically the point that I've been stuck at. I've added some pictures to it (basic stuff) but still can't figure out the <iframe> issue. :-?

11 Feb 2011, 12:50 PM
Umm, I did a test, and I don't think an iFrame will work, runs on a desktop browser but not on a mobile device:


Also, see how I used the <div> to contain my iFrame, is that what you were having problems with?

11 Feb 2011, 1:13 PM
this is a hack that might get you thinking, with jQuery you can actually load content from another page and insert it into another page, which I did here:


Maybe that might help you pull the HMTL from the form into a component, and with JS you can remove and add properties, and CSS can you restyle them for mobile.

14 Feb 2011, 11:47 AM
Hi Jose,

Thank you for the help! :D I've been really busy at work and haven't had a chance to work on the project much over the past couple of days but I plan on starting it again on Tuesday. I'll try the hack that you suggested and send you an update on Wednesday.

15 Feb 2011, 4:44 PM
joseeight - I've found your posts and examples extremely helpful indeed. Thank you!

Using what I learnt, I've created a link within a carousel only - so just the card and not the tab. Do you know how to apply a fade animation to the transition between these (carousel) cards.

Perhaps using something along the lines of:


22 Feb 2011, 7:41 PM
Hi Jose,

Sorry for the delay in getting back with you, I've been extremely busy at work. How's your leg by the way??? :-/ I've been working on the project some but when I try to pull up the website on an Android 2.2 phone I get a completely blank white screen. Any clue of what's wrong? I've posted a new link to the project here.


Hope your leg is doing better! :D

2 Mar 2011, 9:30 AM
Hi Jose,

I did a complete re-upload of all of the files and it now works on Android. I saw a commercial for the Renaissance Hotels during the Oscars by the way and it reminded me of you. :D I think I'm starting to figure things out a little better now. I am wondering however how to change the color of the default themes? It comes with the dark and light but I want to add custom colors to tabs, tab bars and tool bars. Any clue on how this is done? Thanks!