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

Sidebar as Accordion

WordPress Sidebar as Josef Sakalos Accordion widget? Yes. It was one of the best experiences I had during coding the theme. It took about ten minutes to make it work. HTML of my sidebar looks like the one below. Every widget has widget class assigned and two children. The first one is translated into panel’s header, next once becomes panel’s content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="sidebar">
    <div id="categories" class="widget widget_categories">
        <div class="wtitle">Categories</div>
        <div class="text-content">
        <ul>
            <?php wp_list_categories('title_li='); ?>
        </ul>
        </div>
    </div>
    <div id="archives" class="widget widget_archives">
        <div class="wtitle">Archives</div>
        <div class="text-content">
        <ul>
            <?php wp_get_archives('type=monthly'); ?>
        </ul>
        </div>
    </div>
    [...]
</div>

First I have put accordion control into my layout as an east panel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
. . .
    theEast = layout.add('east', new Ext.ux.Accordion('panelEast', {
        monitorWindowResize:true,
        title:'Sidebar',
        autoScroll:true,
        collapsible: true,
        fitToFrame: true,
        animate:false,
        boxWrap: true,
        fitContainer: true, 
        keepState: true,
        expanding:true,
        fitHeight:true
    }));
. . .
</script>

The only thing I needed to translate it into Saki’s Accordion was to iterate through all widgets. Let’s look at the function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
. . .
    setupSidebar: function() {
        Ext.select('.widget').each(
            function (e) {
                theEast.add(new Ext.ux.InfoPanel(Ext.getDom(e).id, {
                    autoScroll:true,
                    animate:false
                }));
            }
        );
    }
. . .
</script>

Thank you Saki for your great Ext extension. If anything else should be done, please let me know.

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!