PDA

View Full Version : switching views



nofx
2 Feb 2012, 5:47 AM
We're trying out the designer tool. First thing i'm trying is to switch between views. I'm not sure how to do this though.

I've created three panels, called: "Main", "Panel1", "Panel2". I've "linked" Panel1 and Panel2 to Main by dragging them ontop of it in the inspector window.

I also have a button in Panel1 with which i want to switch to Panel2, how can i do this easily?

nofx
2 Feb 2012, 6:18 AM
Just a thing i tried, maybe i'm close...

I gave my Main panel a userAlias of 'main' and then in the button of Panel1 i do:


var panel = Ext.ComponentQuery.query('main');
panel.setActiveItem('mypanel2');


I see that the variable "panel" holds all the data of my Main panel. But i can't call setActiveItem on it to show my other panel. Anyone any idea how to do this?

nofx
2 Feb 2012, 6:57 AM
Figured it out, this is the answer:



var panel = Ext.ComponentQuery.query('main')[0];
panel.setActiveItem('mypanel2');


Another thing though, the slide animation goes from left to right, but i want it to slide from right to left.
How can i change the slide direction...??

PranKe01
2 Feb 2012, 7:39 AM
I got the sample problem. Isn't there an easier way to do that?

I added an Tap-Event to the button of my "StartView" (which is of type Panel). In this event I want to switch to the "MenuView" (which is also of type Panel). What do I have to insert into the event-function, to slide the "MenuView" in and the "StartView" out? I think this is a pretty basic thing...

Thanks!

nofx
2 Feb 2012, 7:57 AM
I got the sample problem. Isn't there an easier way to do that?

I added an Tap-Event to the button of my "StartView" (which is of type Panel). In this event I want to switch to the "MenuView" (which is also of type Panel). What do I have to insert into the event-function, to slide the "MenuView" in and the "StartView" out? I think this is a pretty basic thing...

Thanks!

You want to know how to switch between views? Not sure how far you got but i'll try to explain every step i take in order to do this. Could also be usefull to others.

I created 3 panels. Main, Panel1 and Panel2. I'm gonna use the Main panel as my 'viewport'. Eventhough technically there's already a view port. But i have no idea how to change settings in that original viewport. So that's why i use my own panel as a Viewport. Effect is the same.

First click on the Main panel and type 'main' in userAlias,

Next thing i do is i drag and drop Panel1 into the Main panel INSIDE the Inspector window. I do the same thing for Panel2, i drag and drop this in the Main panel aswell. When you do this you'll be prompted with a MessaeBox with 3 options. Choose the last option 'Link'. This links the panel to the Main panel.

If you done this right then you'll see that the Main panel has 2 sub panels. Click on one of those sub panels and set the 'id' property to 'panel1'. Do the same for Panel2, but set the 'id' to ''panel2'.

Now create a button on Panel1 and select the button on the panel. In the right property window you should also see a tab called "Events". Click on that and select the "Tap" event. Now if you fully open the tree of the button in the inspector window, then you should see that the event is attached to that button. Then simply go to "code view" and add the code i posted earlier. You can simply use the 'id' of the sub panels to switch.

PranKe01
3 Feb 2012, 1:01 AM
Hi and thanks for your help :)

But that does not work for me :( This is how it looks right now:
31318

The variable "mainPanel" is empty. I also tried it with the [0], but that did not work (of course).
Where is your "initialView" set? Do you see any problem in my test-case?

PranKe01
3 Feb 2012, 2:24 AM
OK, I found a solution:


Ext.ComponentQuery.query('main')[0].getLayout().container.setActiveItem('menuPanel');

The only problem I now got, is the same which nofx got. The slides go to the wrong direction...

vdemnos
3 Feb 2012, 6:00 AM
The trick is to set the animation before calling the setActiveItem(... )

Here is some sample code:


this.getMain().getLayout().setAnimation({
type: 'slide',
direction: 'right'
});