Pages list

Pages list, the HTML list generated by Wordpress’ is somehow rewritten into Ext.Menu. Still, I have no idea how I could manage it. Please check the code below and help me to write it better. Wordpress wp_list_pages() function generates the HTML that looks almost like the one below:

<div id="wp-tb-items">
<ul>
	<li><a href="http://extjswordpress.new/?page_id=2">About</a></li>
	<li><a href="http://extjswordpress.new/?page_id=3">Theme Overview</a></li>
	<li><a href="http://extjswordpress.new/?page_id=4">Theme Explained</a>
		<ul>
		<li><a href="http://extjswordpress.new/?page_id=5">Hierarchy of Templates</a></li>
		<li><a href="http://extjswordpress.new/?page_id=6">Ajaxifying</a></li>
		<li><a href="http://extjswordpress.new/?page_id=7">Configuration and application</a></li>
		<li><a href="http://extjswordpress.new/?page_id=8">BorderLayout adjustments</a></li>
		<li><a href="http://extjswordpress.new/?page_id=9">Sidebar as Accordion</a></li>
		<li><a href="http://extjswordpress.new/?page_id=10">Pages list</a></li>
		<li><a href="http://extjswordpress.new/?page_id=11">Widgets</a>
			<ul>
			<li><a href="http://extjswordpress.new/?page_id=12">Calendar</a></li>
			<li><a href="http://extjswordpress.new/?page_id=13">QuickSearch</a></li>
			<li><a href="http://extjswordpress.new/?page_id=14">Recent Comments</a></li>
			<li><a href="http://extjswordpress.new/?page_id=15">Search</a></li>
			</ul>
		</li>
		</ul>
	</li>
</ul>
</div>

And here is the result I have achieved. HTML list converted into beautiful Ext.Menu:

It is obvious that I needed a recursion to handle the task, but there are a few conditions that has to be handled. First: top level pages (About, Theme Overview and Theme Revealed) - from the above example - have to be translated into Ext.Toolbar.Items. The rest of pages, does not matter which level, should be translated into Ext.Menu.Items. One more catch: if the top level page has sub-pages it cannot be converted into simple Ext.Toolbar.Item, that in fact is Ext.Toolbar.Button. It has to be Ext.Toolbar.SplitButton; I need to attach menu to it. It is a pity I have not done it this way. The result looks as follows.

<script>
. . .
 
    setupMainMenu: function() {
        var mainMenuTb = new Ext.Toolbar(‘wp-toolbar’);
        Ext.select(‘#wp-tb-items//li’).each(function(el) {
                var l = el.dom.firstChild.href;
                if(el.query(‘li’).length != 0) {
                    this.mainMenuNested(el, mainMenuTb);
                } else {
                    mainMenuTb.add({
                        text:el.dom.firstChild.innerHTML,
                        handler: function() { this.loadPosts(l);}.createDelegate(this) });
                }
            }.createDelegate(this)
        );
    },
    mainMenuNested: function(el, toolbar){
        var l = el.dom.firstChild.href;
        var nestedMenu = new Ext.menu.Menu();
        // on the first mainMenuLevel creates MenuButton (SplitButton) otherwise simple Menu.Item
        if (mainMenuLevel < 1) {
            var btn = new Ext.Toolbar.SplitButton({
                text:el.dom.firstChild.innerHTML,
                handler: function() { this.loadPosts(l);}.createDelegate(this),
                menu: nestedMenu
            });
        } else {
            var btn = new Ext.menu.Item({
                text:el.dom.firstChild.innerHTML,
                handler: function() { this.loadPosts(l);}.createDelegate(this),
                menu:nestedMenu
            });
        }
        mainMenuLevel++;
        // iterates through pages lis and creates menu elements
        el.select(‘//li’).each(function (elsub) {
            var l = elsub.dom.firstChild.href;
            if (elsub.query(‘//li’).length != 0 ) {
                this.mainMenuNested(elsub, nestedMenu);
            } else {
                nestedMenu.add({
                    text: elsub.dom.firstChild.innerHTML,
                    handler: function() { this.loadPosts(l);}.createDelegate(this),
                });
            }
        }.createDelegate(this));
        toolbar.add(btn);
    }
 
. . .
</script>