PDA

View Full Version : Touch Application Flow - Transitions



Jack_S
2 Dec 2010, 5:19 AM
Hello All,

I'm completely new to Touch. I've gone through the forum, through the examples, ran a litte test app myself. Everything is good up until now.

Where I'm having difficulties and have not some seen any examples is on application flow/transition. Here is what I mean and where I'm stuck.


Index Page
------------
Button 1 - Customers
Button 2 - Maintenance

When I click on the Customers I would like to show a data list view in another page (carousel). Then when he selects a customer, I want to display another page static form with the details.
SO here is the flow.



Flow/Transitions
=============
Button 1 - Customers(page/card 1) - TOUCH/CLICK -> show list view(page/card 2) -> TOUCH/SELECT -> show static form(page/card 3).
Button 2 - Maintenance(page/card 1) - TOUCH/CLICK -> show list view(page/card 2) -> TOUCH/SELECT -> show static form(page/card 3).


I would like this to all work in a carousel type of motion but you cannot cannot access page/card 2 without clicking on the button. Also can I reuse the same cards whether I start with Button 1 or Button 2. Do I need seperate carousels or do I add and remove cards? These are some of mental blocks I have.

I'm coming from a pure web-background so I'm have a little hard time getting my head around application flow in Touch versus just opening new windows.

Thanks in advance for any links, assistance and support.

Awesome product and looking to developing the final piece of my project.

Jack S.

tomalex0
2 Dec 2010, 9:53 AM
So Basically from index panel you have go in two ways.

Try something like this

BasePanel
1. Base Customer Panel
1.1 - Customer Page
1.2 - List Page
1.3 - Static Form
2. Base Maintenance Panel
2.1 - Maintenance Page
2.2 - List Page
2.3 - Static Form

Jack_S
2 Dec 2010, 11:00 AM
Hello Toma,

Thank you very much for the response.

Should every additional page just be a panel?

SO I have Base Panel, and every page and form should be panels containing list view/form, or what you are suggesting is that
I have:


BasePanel
1. Base Customer Panel (xtype: panel)
1.1 - Customer Page (xtype panel0
1.2 - List Page (xtype panel with an data list xtype)
1.3 - Static Form (xtype panel with a form xtype)
[.....]


Thanks for your help in this matter.

Jack S.

tomalex0
2 Dec 2010, 11:26 AM
yea that will work.

Jack_S
2 Dec 2010, 12:08 PM
Awesome thanks Toma . Going to dive into it !

Jack_S
2 Dec 2010, 12:29 PM
Hello Toma,

I put together a small sample app, and it doesn't see to work. I'm really new to this, my first day actually.

Thanks in advance for some any assitance.

Jack S.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){

var mainPanel = new Ext.Panel({
fullscreen: true,
//cardSwitchAnimation: 'slide',
layout: 'vbox',
items: [
{xtype: 'button', text:'Customers', ui: 'light', handler: showCustomerPanel}
,{xtype: 'button', text: 'Maintenance', ui: 'light'}]
});

var showCustomerPanel = function(){

var panel = new Ext.Panel({
fullscreen: true,
//cardSwitchAnimation: 'slide',
layout: 'fit',
items: {
html: 'Customers Panel'
}
});
panel.show();
};
mainPanel.show();
}
});

Jack_S
2 Dec 2010, 10:42 PM
Hello,

I've been testing this panel transition all day and still can't figure it out. Can anybody offer any insight.

Thanks in advance Jack S.

Jack_S
4 Dec 2010, 5:27 PM
BUMP

tomalex0
4 Dec 2010, 10:29 PM
Try this



var mainPanel = new Ext.Panel({

fullscreen: true,
layout: 'card',
dockedItems:[{
xtype:'toolbar',
items:[{
text:'Customers',
handler:function(){
mainPanel.setActiveItem(0,{type:'slide',direction:'right'});
}

},{xtype:'spacer'},{
text:'Maintenance',
handler:function(){
mainPanel.setActiveItem(1,{type:'slide'});
}
}]
}],
items:[{
fullscreen:true,
layout:'card',
html:'Customer Base Panel'
},{
fullscreen:true,
layout:'card',
html:'Maintenance'
}]
});

Jack_S
7 Dec 2010, 1:09 PM
Works perfectly. Thanks tomalex0