List with detail panel inside a tabpanel, is it possible?

[celticboyone]

... attached are the lists switching as described above. You need to start with the Twitter button depressed because that is the initial view and so on but this will give you a start.

[MichelleWong]

Celticboyone, you're great!!

I'm just working as you describe out on example1. And I got it to work!
i'll show you the result

Please see attached the Final result.... after two full weeks.... I finally got it works

Thanks for your help Celticboyone! Cheers!

Ps. one last question, how can I deselectAll() my selected Item from the list? I have tried several methods, but got errors. :P

TabExample3Final.xda

[celticboyone]

That is great - well done! To disable selections in the list you should be able to set an action to capture the 'back' event from the Navigation View (when the Back button is clicked to return to the list). In that action get a reference to the appropriate list and then do your deselectAll() on it.

[MichelleWong]

Celticboyone,

I have tried an action on the back button from the navigation list, but i still got an error "Uncaught TypeError: Object [object Object] has no method 'deselectAll' "

I have use this in my action:

this.getMainNaviView().deselectAll();

or do I have to call the specific list to deselect it? I also have three other list in my navigation, so how do I know which one I should deselect?

Michelle

[celticboyone]

Yes, you almost have it right. Remember that it is the lists you want to deselect, not the Navigation View (it doesn't know anything about "selections"). So you've added an action in the controller that captures the Navgation View "Back' event, now you just need to deselect the List - in fact you could do both at once since they both live inder the Navigation View (not sure if you have controller refs for both lists so just add them if not), so your "Back" controller action would simply be:

this.getCustomersList().deselectAll();
this.getTwitterList().deselectAll();

That should do it.

[MichelleWong]

Thank you once again, celticboyone, it works! Cheers ....

Now, I'm a step further with my app

[digeridoopoo]

Can anyone give some tips if using this in an iPad layout, with both the list and details view visible on the page at the same time?

Instead of 'pushing' the view would it be 'set'?

Thanks

[MichelleWong]

@Digeridoopoo

I think you shouldn't use the navigationview in this case. Because the detailed information only 'push' the data in the same view.
So achive this, I will create a container, with the layout as card. Here it will show my list, and on itemtapped, it will target an another container to show my detailed info. In this case with setActiveItem.

(it's hard to describe, but correct me if I am wrong).
You can take a look to the Twitter demo of Daniel gallo http://www.youtube.com/watch?v=ss9QxMtNmhA


Hope this helps

Michelle

[celticboyone]

You mean that you have a list and a panel together and when you click an item in the list you want the corresponding data, and more, to appear in the panel? Is so then all you need to do is set the data in the panel when an item in the list is tapped, like this:

onListItemTap: function(dataview, index,target,record,e.options)
var infoPanel;
infoPanel = this.getMyPanel();   // Get a reference to the panel
infoPanel.setData(record.data);  // Set the data in the panel

Your panel template "tpl" config will need to be set to show the data, maybe like this:

tpl
<img src="images/{img}" />
Name: <strong>{name}</strong><br>
License: {license},&nbsp;{state}<br>

In this example the items inside the {} are the fields in your model that you want to show in your panel.

[tyladurdan]

I tried that but I received an error in the console saying MyPanel not found even though I had named it as such.

I think a great one to modify would be the current movies project. That basically does everything I need it to but just not all on one screen, in an iPad-like split view.

I've attached the original and my modified versions with the layout working, I just don't have anything showing up in the detail panel. Anyone have any idea how to set instead of pushing the view?

:-)