PDA

View Full Version : Toolbar and redirection between panels



Considerate
6 Aug 2010, 8:32 AM
Hi,

I'm new to Sencha and ExtJS development and have run into a problem.
What I want is to create a behavior like the one iPhone contacts have.
I want the list to redirect to a form when you click a row and to another one when you click a "+" button in the top right corner of the screen. The form should then have a back button leading back to the list.

I know this might not be something that you can't give a short quick answer but I really appreciate any effort to help.

The problem is that I don't know how to change the card when I click the row because the index.js file ins't listening for navigation events on those rows.
Is there any way to trigger the listchange event on the navigationPanel from the card that contains the list?

Thank you, Considerate

Considerate
6 Aug 2010, 3:45 PM
I now have managed to make the list redirect to the form when you click a row using itemtap event on the list, setting the layout of the panel containing the list to 'card' and changing to the other card using setCard method. The problem is that I can't move back to the list. I can change the title with setTitle on sink.Main.ui.navigationBar but I don't know how to edit the buttons or keep the List intact after redirecting (i.e. not making it unable to return to it). Can you help?

I can access the navigationBar object as sink.Main is made accessible globally but even if I edit the items of it or even set the dockedItems of sink.Main.ui directly nothing gets updated to show my changes. Is that what is done in the line:
Ext.ux.UniversalUI.superclass.initComponent.call(this);? if that is the case how do I make it update from this other object?

Also on a side note, how do make the this keyword refer to the object (this time Ext.Panel) your editing?

Considerate
6 Aug 2010, 6:25 PM
Well, I have successfully created the redirect to another panel and then the toolbar to redirect back from it.

The redirection works great both ways but there is one thing that I can't figure out how to do. When I modify the toolbar I have to remove everything in it and then add new content. This destroys the possibility to get the same toolbar back (as it was before modification). How would you suggest that I back it up to restore when the back button has redirected me back to my list.

I need to modify the toolbar buttons because on iPad and Chrome the back button is not even shown in the panels and besides I like to change the text of the button to match the title of the panel I redirected from to make it absolutely clear where you are in the program at all times.

Now, however, I can't even get back to the main navigation on the iPhone.

Here's the code I've come up with so far, it's not pretty but it almost works (almost ^.^).


pages.List = new Ext.Panel({
layout: 'card',
cls: 'demo-list',
items: [{
width: 300,
height: 500,
xtype: 'list',
store: pages.ListStore,
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true,
listeners:
{
itemtap: function(list,index,element,event)
{

pages.List.backButton = new Ext.Button({
hidden: false,
text: 'List',
ui: 'back',
handler: pages.List.onBackButtonTap,
scope: pages.List
});

var sinkUI = sink.Main.ui;
sinkUI.navigationBar.removeAll();
sinkUI.navigationBar.add(pages.List.backButton);

sinkUI.navigationBar.setTitle("Edit");

sinkUI.navigationBar.doLayout();

sinkUI.doComponentLayout();

sinkUI.setCard(pages.EditForm, 'slide');

},
scope: this
},
}],
onBackButtonTap: function()
{
sink.Main.ui.setCard(pages.List , {
type: 'slide',
direction: 'right'
});
sink.Main.ui.currentCard = pages.List;
/*if (Ext.platform.isPhone) {
this.backButton.hide();
this.navigationBar.setTitle(this.title);
this.navigationBar.doLayout();
}*/
sink.Main.ui.fireEvent('navigate',sink.Main.ui, sink.Main.ui.activeItem, sink.Main.ui.navigationPanel);
}
});

Please help.

Thank you.

//Considerate

Considerate
6 Aug 2010, 9:30 PM
I ended up with a solution that works much better. Instead of deleting all buttons from the toolbar i found the button classcontained all the functions I needed.
All i did was hide or show the buttons according to what page I was on and changing the handler accordingly as well as changing the text through the methods hide() show() setText() and accessing the handler directly.

gilkudik
9 Apr 2011, 6:13 PM
Can u put the code to see it?

I'm working in something like you do but with a nestedlist.

Thanks