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
7 Responses to “Ext JS Theme Revealed”
Nico says:

Testing theme =)

Great app

testando says:

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

Khashayar says:

well done

Me says:

good!

bywide says:

nice … O_O

Trojan, says:

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