View Full Version : Dynamically setting navigation menus

19 Jun 2010, 7:05 AM
Hey there,

I just had a look at the Sink example and was wondering if it's possible to set the navigation dynamically from a source like JSON-P or sth.?

Currently the navigation contents are loading from a static JS like:

ns.Structure = [{
text: 'Functions',
cls: 'launchscreen',
items: [{
text: 'Buttons',
card: null,
source: 'dynamic1'
and then called with:

navigationItems: ns.Structure,
So, is it possible to load the submenu elements (e.g. dynamic1) from a dynamic source instead of a static JS file?

Thanks in advance!

19 Jun 2010, 7:37 AM
off course, you can.

you can load a configuration and add the items with the .add(yourconfig) method to a Ext.Nestedlist or what you need

19 Jun 2010, 2:29 PM
Hey Nils,

thanks so far. Unfortunately the API docs return 404 all over for me when trying to access docs for the add() method. Moreover, I cannot find any API docs for Ext.ux.UniversalUI which I use on Sencha Touch to render the menu.

Here's what I have so far: http://wpseek.com/mobile/js/wpseek-m.js (wpseek.Main.sendRequest)
And here's the structure I'd like to add the menu items to: http://wpseek.com/mobile/js/structure.js

I'm trying to add them with:

wpseek.Structure.add({text: 'test'});

19 Jun 2010, 11:49 PM
The UniversalUI class was something we didn't want to put into the main library and docs at time of release. We are working on some very elegant ways to manage layouts across tablets and phones and didn't want people to rely on UniversalUI just yet. I can't guarantee the API for it won't change soon.

20 Jun 2010, 2:41 AM
Alright, thanks for the reply. So I should freeze the navigation part for now until you updated the API?

20 Jun 2010, 4:41 AM
No you can still use it. You might have to change your code a little when you update to one of the upcoming versions. It won't probably be that much different. For you to add temporary functionality to it might not be worth it though since they are almost guaranteed to break once I change the class. .

25 Jun 2010, 6:27 AM
Hello there.

I am also trying to get a dynamic navigation menu to work and after looking at the documentation, I figured that adding items to the nestedList would be the way to go, just like suggested up there:

add the items with the .add(yourconfig) method to a Ext.Nestedlist or what you need

But, somehow this does not seem to work. After trying in my app for a while I took a step back and tried to modify the Nested List Example from the Sencha Touch beta with one simple line (after the list is created):

text : 'Option D'
No success here. Then I thought, that lazy rendering might be a reason, and I added:

Still no luck. Any suggestions on what I am missing? Or may this be a bug in the nestedList component?
Ideas would be greatly appreciated.


25 Jun 2010, 10:26 AM
The example was not designed to handle dynamic loading of navigation items. The UniversalUI class was more a proof of concept than an actual class to be used. That is why it was in an example and not in the library itself. Structure is just an array that is being passed to the NestedList constructor on instantation. It doesnt update itself when you modify that array. I would suggest starting from scratch and instantiating your own NestedList. If you look in the source code for NestedList you can find a method called setList. You can pass it an object that contains text and items properties. This is what you want to call after your ajax request comes back.

I am saving this thread and will make sure that we provide an easy way to achieve what you are trying to do in an upcoming release.

25 Jun 2010, 12:25 PM
Hi Tommy,

thanks for pointing me to setList(), it serves quite well as a good work-around for now. I guess I was relying a bit too much on the API Documentation and didn't check for other methods available in the source.

By the way, I think that Sensa Touch as a whole is an excellent piece of work. While working myself into the framework (I have no previous experience with Ext.js) I sometimes had to chuckle, because I couldn't believe how easy you make some of the more annoying tasks. Thanks a great deal for that.

28 Jun 2010, 12:40 PM
Could you please post an example of using setList() ?

Trying to do exactly the same (set nestedList items dynamically using ajax data).

Will the listeners initially set on the nestedList still work? We have setup a listener to change the toolbar title when a list item is clicked.

28 Jun 2010, 2:00 PM
Sure, look for the example in the download under sensa-touch-0.9/examples/nestedlist, then insert just before the end of onReady:

var list = [
text: 'Test'
text: 'Test 2'

nestedList.setList(list, true);
Setting the second parameter to true is important for the list to rebuild.

The listeners of that example are still working after changing the list, so I expect them to work for you too.

For the UniversalUI-Example you would need to supply a card property for the items to work as expected, but setting a custom handler works pretty well too, if you want to do something else.


28 Jun 2010, 2:21 PM
Thanks for that.
I'm now able to set the items dynamically.
However, now when you click on a list item and then click 'back' the nestedList is empty, presumably as the ajax is now not getting fired off and the initial nestedList element is empty before ajax is used to populate it.

Is there a cleaner way of doing this? Surely even if ajax/setList() is being used when the back button is used to return the items should still be there?

28 Jun 2010, 2:36 PM
Well, no... as you can read above the setList() function is not actually part of the official docs and more or less a workaround for the *not yet* working add() functionality of the nestedList component. So the tradeoff of that workaround is, that it completely destroys and rebuilds the list.
If you want to have a really dynamic list, you will have to cache the items of the list in your own object, add and change that custom object with ajax and after changing your cache, rebuild the nestedList completely from that cache and set the activeItem appropriately.
(Well, its all just a mind game... haven't tried it out yet)

28 Jun 2010, 2:52 PM
Having to rebuild the items again when you return to the list isnt a bad idea anyway so I've moved to a separate function which is called on first load and when you return to the list via the back button.

29 Jun 2010, 8:39 AM
Well, I basically I stopped trying to load the items dynamically with each click, but I created my structure file with PHP completely. Unfortunately I have more than 3000 items to set, and Sencha/Safari doesn't seem to be able to handle large JS objects. With each click the Safari freezes for a few seconds.. hmm.

May the previous posters please post their approach so far? Thanks.

2 Jul 2010, 12:07 AM
Having looked in detail at the KitchenSink example, it seems to me that a critically important addition to the UniversalUI class will be to allow an additional event to be exposed just after entry to its onListChange function, to allow a user to dynamically fetch a card definition (eg using Ajax). The current navigate event is fired after setCard has been invoked which is too late. I'd guess, however, that this is something you guys have realised and hopefully this functionality will be in the next generation UniversalUI class.

2 Jul 2010, 11:18 AM
Again, the UniversalUI class was a proof of concept and is not totally ready for heavy usage. It is however a good starting point and example of how to achieve a layout like that.

Also the NestedList will be heavily improved upon. Actually we are currently working on both List and NestedList and implementing lots of the functionality you guys have all been asking for.