Creating Ext Menu from existing mark-up?

[acebone]

This must be answered somewhere out there, but I can't find it.

What is a good approach to turn already existing mark-up into an ExtJS menu ?

Example markup
<div id="navigation">
<ul class="menu-level-1">
<li class="menu-item menu-item-first">
<a href="index.php?id=2">Main page</a>
<ul class="menu-level-2">
<li class="menu-item menu-item-first">
<a href="index.php?id=9">underside 1</a>
</li>
<li class="menu-item">
<a href="index.php?id=8">underside 2</a>
<ul class="menu-level-3">
<li class="menu-item menu-item-last">
<a href="index.php?id=15">Ny underside</a>
<ul class="menu-level-4">
<li class="menu-item menu-item-first">
<a href="index.php?id=20">underside 1</a>
</li>
<li class="menu-item">
<a href="index.php?id=19">underside 2</a>
</li>
<li class="menu-item">
<a href="index.php?id=18">underside 3</a>
</li>
<li class="menu-item">
<a href="index.php?id=17">underside 4</a>
</li>
<li class="menu-item menu-item-last">
<a href="index.php?id=16">underside 5</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

[fay]

Take a look at DomQuery (http://extjs.com/deploy/ext/docs/output/Ext.DomQuery.html) - you should be able to do it with that.

See also:


http://extjs.com/learn/Tutorial:DomQuery_v1.1_Basics

http://extjs.com/learn/Tutorial:DomQuery_v1.1_Advanced

[acebone]

Sorry for posting in 'General' at first. I thought I posted in 'Help', but apparently I was sleeping. Thnx for moving it.


I'll def. look into DOMQuery - thank you.

I would have thought that Ext already had some built-in way of doing it automatically ?

[fay]

Have you searched for:



menu html
menu markup
menu xml


It has been done with XML and it shouldn't be too hard to modify for DOM. See: http://extjs.com/forum/showthread.php?t=8758

[Animal]

I would have thought that Ext already had some built-in way of doing it automatically ?

What, from your exact markup structure? Jack would have had to have clairvoiant powers!

[acebone]

What, from your exact markup structure? Jack would have had to have clairvoiant powers!

Hehe - Wasn't meant like that.

I've just come to expect awesomeness all round from Ext.

It would not be a too bad idea though. Of course you'd have to set certain requirements to the mark-up. It seems a common and widely spread practice to use unordered lists for navigation, and then style the heck out of them, so I am sure that an .menuFromMarkup() method would be highly appreciated by many.

I am going to write one myself using DomQuery - I'll see if I can make it work as an extension of the Ext Menu object, and then post it here so others can grab it if they want.

[Animal]

Hehe - Wasn't meant like that.

I've just come to expect awesomeness all round from Ext.

It would not be a too bad idea though. Of course you'd have to set certain requirements to the mark-up. It seems a common and widely spread practice to use unordered lists for navigation, and then style the heck out of them, so I am sure that an .menuFromMarkup() method would be highly appreciated by many.

I am going to write one myself using DomQuery - I'll see if I can make it work as an extension of the Ext Menu object, and then post it here so others can grab it if they want.


Yeah, you should be able to cobble together a recursive function to process UL/LI into Menu/Item

I've dome a similar thing for XML markup in a thread a long time ago. It may still be around somewhere...

[steffenk]

would be nice to have a routine for that in an ux using transform simular to ComboBoxes-method.