Ext JS Theme Revealed
October 9th, 2007 by W.Regenczuk

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<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>
ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme
Pages: 1 2 3 4 5 6 7 8 9
This entry was posted on Tuesday, October 9th, 2007 at 5:58 am and is filed under ExtJS, Help, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Tags: , ,
Posted in ExtJS, Help, Wordpress | 7 Comments »
7 Responses to “Ext JS Theme Revealed”
Nico says:
February 9, 2008 at 9:22 pm |

Testing theme =)

Great app

testando says:
April 2, 2008 at 1:54 am |

testando, m testando, m testando, m testando, m

Khashayar says:
May 11, 2008 at 3:20 pm |

well done

Me says:
July 25, 2008 at 7:21 pm |

good!

bywide says:
October 28, 2008 at 12:31 pm |

nice … O_O

Trojan, says:
January 28, 2009 at 11:27 am |

hello! i like this themes, but i can’t install.why ? pls help me!