PDA

View Full Version : What's the fundamental concept of switching between views?



modcarl
5 Mar 2011, 8:35 PM
In iPhone, we can get it done by such kind of code:


[self.navigationController popViewControllerAnimated:YES];
[self.navigationController pushViewController:aViewController animated:YES];


And I tried to do this in Sencha Touch:


var list = new Ext.List({
floating : true,
width : 380,
height : 420,
centered : true,
modal : true,
hideOnMaskTap: false,
itemTpl : '{firstName} {lastName}',

onItemTap: function(item, index, e) {
alert("dismiss");
demos.List.remove(list);
},

grouped : true,
indexBar: true,
store: store
});
list.show();


I initialized the Ext.List, and configure it with dismissing on ItemTap, demos.List is the parent of list.
(It doesn't make sense, I know, just a trial.)

When I tapped it, I got the warning http://dl.dropbox.com/u/3968081/Kitchen%20Sink.jpg.

How should I do in Sencha? Could someone explain the concept of view?
Thanks very much!

(I will be very appreciated if you take a look at my question on stackoverflow (http://stackoverflow.com/questions/5204881/left-side-navigationview-in-sencha-touch-framework-a-question-about-ext-data-tre).)

mitchellsimoens
6 Mar 2011, 4:59 AM
To switch between views, most popular way is to have a Panel with CardLayout. First item be the List and on the itemtap event, use setActiveItem to another item.

Why would I answer a Sencha question on StackOverflow? Why not post it here?

modcarl
6 Mar 2011, 6:36 AM
Thanks.

In the above case, how should I do by Ext.layout.CardLayout?
There is no example using CardLayout, the more detail will be better...Orz

BTW, I re-post it on this forum.

mitchellsimoens
6 Mar 2011, 6:37 AM
Checked out the demos or API yet?

modcarl
6 Mar 2011, 11:51 PM
Yes, but it looks like "ONE parent view and MULTIPLE child view" controlled by toolbar or tabpanel.

What I want is just a simple view-to-view backward and forward, which I mentioned, a dismissing or a push/pop-like navigation.

Thanks though :)

SimonFlack
7 Mar 2011, 12:51 AM
Its basically the same as a tabview only you have to handle the card swap.

What you want is a


{xtype: 'panel', layout: 'card', id: 'myworkspace'}

as your main workspace. Inside this card workspace you place the views that you wish to navigate between (Think of a deck of cards where each card is some view).

You swap cards by telling the workspace (the panel with card layout) to set a particular card as the active item.


Ext.getCmp('myworkspace').setActiveItem(0); // Set the first card to be active item.

ngardner
7 Mar 2011, 9:02 AM
I was looking for the same thing, thanks!

modcarl
11 Mar 2011, 7:12 AM
Thanks!