ExtizeMe, is a WordPress theme written mostly in JavaScript. Layout, behavior and look&feel are made with Ext Js Library (http://extjs.com). What makes ExtizeMe there different from other themes is:

• Accordion sidebar;
• Tab browsing;
• Post zooming;
• Live search;
• Picture preview;
• ExtJs skins;

ExtizeMe in action

ExtizeMe bookmarklet

You can finf ExtizeMe bookmarklet on ExtizeMe options page. Add the bookmarklet to your favorites and execute it while browsing a wordpress powered page. In theory it should extify the site. Take a look on below screencast.

ExtizeMe on google code

I would describe current stage of ExtizeMe as experimental. I am releasing it because, as a father of two and full time employee, I feel I am not able to finish it in predictable time. It is a pity. This is the link to ExtizeMe project home at google: http://code.google.com/p/extizeme/.

If there is someone out there who can spent his/her time improving the ExtizeMe, please let me know.

TV323DTABSMM

What is ExtizeMe

ExtizeMe, basicall, is a wordpress theme. It makes heavy use o JavaScript. Everything: layout, behaviour and look&feel needs JavaScript to work. If a user browser does not have JavaScript enabled, ExtizeMe displays itself as plain html theme: ExtJs 1.9.

Current features

• ExtizeMe is SEO-Friendly; web crawlers see it as plain HTML websites, while users with modern browsers can use advanced, dynamic interface;
• ExtizeMe has two modes: full and preview. In preview mode people can switch between JavaScript and HTML layout. Full mode does not allow for such a choice;
• ExtizeMe has currently one sidebar, accordion layout;
• ExtizeMe has 6 CSS skins which are actually Ext JS themes;
• …There are more…

Secreenshots

Credits

ExtizeMe uses:

• Ext JS library version 2.2.1;
• Ext.ux.ManagedIFrame by Doug Hendricks;
• Ext.util.MD5 by wm003.

Thank you all for your fantastic work. Without it I would not be able to realize my odd idea.

This release

This release is not intended for usage by bloggers, it requires additional work. This is just a preview that shows how WordPress and Ext JS can work together.

The rest

The rest will take place after my two week vacation.

The result below:

Save the adds.js from adds.zip in ./ext-3.0-rc1/docs/resources/. Then alter ./ext-3.0-rc1/docs/index.html like this.

17
18
19
20
21
22
23
24
25
26

...
    <!-- include everything after the loading indicator -->
    <script type="text/javascript" src="resources/ext-base.js"></script>
    <script type="text/javascript" src="resources/ext-all.js"></script>
    <script type="text/javascript" src="resources/TabCloseMenu.js"></script>
 
    <script type="text/javascript" src="resources/docs.js"></script>
    <script type="text/javascript" src="resources/adds.js"></script>
    <script type="text/javascript" src="output/tree.js">
...

It adds new “block” on the right on “API Home” where you can enter a link to other Ext docs. (In my case I wanted to compare docs from 2.2.1 with 3.0RC1.). Then, when opening new tab, two XHRs are made, for files from ./ext-3.0-rc1/docs/output/ and files from ../../ext-2.2.1/docs/output (in my case). After that, the simple comparing takes place. As the result, you are able to see “new stuff” highlighted, “changed stuff” with red underline. Additionally at the top of the class page new section (“Comparison Info”) is added. It presents some statistics and details of comparison. Of course, this does not exempt you from the studying the sources, but it highlights places you should check. I have made it for my own needs, but perhaps it can help someone else.

Download: addsv2.zip.

Meantime, I have made Ext 1.9 theme which you can see right now. The theme does not use JavaScript, but it uses ExtJS stylesheets. And thus it looks awesome. Till the end of this week new Ext1.9 theme should be in Downloads section. Since today you can enjoy it and comment.

Before you start to admire the colors and layouts, please be aware that I am not the author of all CSSes. It is ExtJS team.

Below you can see few screenshots of the theme.

I know that there are about 70 subscribers to this blog. Please let me know what you think.

It was jgarcia who inspired me to make these bookmarklets. He is using Firebug as presentation environment. I believe most of us have seen his screencasts.

But before starting typing ExtJS code in Firebug console, one has to load ExtJS library and css, somehow. The easiest way is to use empty page with ExtJs loaded. But what if one wants to play with ExtJS within other pages; already loaded by FF? In here John Resig’s bookmarklet helps. He has shown jQuery load bookmarklet here : http://ejohn.org/blog/hacking-digg-w…ug-and-jquery/. He has, also, made very cool demo using jQuery on digg.com site.

So, I have made ExtJs counterpart of jQuery load bookmartlet. To use this, please make a bookmark with the following as Location:

1

javascript:var%20ss=document.createElement('link');ss.setAttribute('rel','stylesheet');ss.setAttribute('type','text/css');ss.setAttribute('href','http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css');document.getElementsByTagName('head')[0].appendChild(ss);void(ss);var%20core=document.createElement('script');core.setAttribute('src',%20'http://extjs.cachefly.net/builds/ext-cdn-8.js');document.body.appendChild(core);core.onload=function(){Ext.Msg.alert('Ext',%20'ExtJS%20is%20loaded!');};core.onload=function(){Ext.Msg.alert('Ext',%20'ExtJS%20is%20loaded!');};void(core);

As you can see, it loads ExtJS from cachefly.

Now, you are able to play with ExtJS using Firebug console on any site.

ExtJS apps as bookmarklets

At the end I decided to make another bookmarklet, that changes google results page formatting to ExtJs one. Here is the location link that you should put to your bookmark:

1

javascript:var%20ss=document.createElement('link');ss.setAttribute('rel','stylesheet');ss.setAttribute('type','text/css');ss.setAttribute('href','http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css');document.getElementsByTagName('head')[0].appendChild(ss);void(ss);var%20core=document.createElement('script');core.setAttribute('src',%20'http://extjs.cachefly.net/builds/ext-cdn-8.js');document.body.appendChild(core);core.onload=function(){if%20(!Ext.get('res'))%20{return;}Ext.data.HtmlElementProxy%20=%20Ext.extend(Ext.data.MemoryProxy,%20{constructor:%20function(element)%20{Ext.data.HtmlElementProxy.superclass.constructor.call(this);this.data%20=%20Ext.get(element).dom.innerHTML;}});if%20(Ext.get('header'))%20{var%20headerSize%20=%20Ext.get('header').getSize();var%20headerHTML%20=%20Ext.get('header').dom.innerHTML;var%20northHidden%20=%20false;}%20else%20{var%20headerSize%20=%200;var%20headerHTML%20=%20'';var%20northHidden%20=%20true;}var%20store%20=%20new%20Ext.data.Store({proxy:%20new%20Ext.data.HtmlElementProxy('res'),reader:%20new%20Ext.data.XmlReader({record:%20'li'},[{name:'a',%20mapping:'a@innerHTML'},{name:'link',%20mapping:'a@href'}])});store.on('load',%20function%20()%20{Ext.getBody().update('');});store.load();var%20v%20=%20new%20Ext.Viewport({layout:'border',items:[{hidden:northHidden,margins:{top:%205,right:5,%20bottom:0,left:5},bodyStyle:'padding:5px',region:'north',html:headerHTML,height:headerSize.height,collapsible:true,split:true},{title:'Preview',region:'east',width:500,margins:{top:%20(northHidden%20?%205%20:0),right:5,%20bottom:5,left:0},cmargins:{top:%20(northHidden%20?%205%20:0),right:5,%20bottom:5,left:5},minWidth:300,maxWidth:1200,split:true,id:'preview',layout:'fit',collapsible:true,collapsed:true,items:[{xtype:'box',autoEl:{tag:'iframe',src:'about:blank',frameborder:0},id:'previewIframe'}]},{margins:{top:%20(northHidden%20?%205%20:0),right:0,%20bottom:5,left:5},region:'center',xtype:'grid',store:%20store,columns:%20[new%20Ext.grid.RowNumberer(),{header:%20'Title',%20width:%20200,%20sortable:%20true,%20dataIndex:%20'a'},{id:'link',%20header:%20'Link',%20width:%20200,%20sortable:%20true,%20dataIndex:%20'link'}],viewConfig:%20{autoExpandColumn:%20'link',forceFit:%20true},sm:%20new%20Ext.grid.RowSelectionModel({singleSelect:true}),title:'Google%20Results',listeners:{rowdblclick:%20function(grid)%20{record%20=%20grid.getSelectionModel().getSelected();document.location.href=record.data.link;},rowclick:%20function(grid)%20{record%20=%20grid.getSelectionModel().getSelected();if%20(Ext.getCmp('preview').collapsed%20==%20false)Ext.get('previewIframe').dom.src%20=%20record.data.link;}},tools:[{id:'help',handler:%20function()%20{Ext.Msg.alert('Help%20notes',['<p>Row%20double%20click%20and%20you%20go%20to%20the%20result%20page.</p>','<p>If%20east%20panel%20is%20open%20it%20presents%20result%20preview%20on%20row%20click.</p>'].join(''));}}]}]});};void(core);

Go to http://www.google.com/search?num=100&hl=en&lr=&q=extjs , click the bookmark and you should see the result.

It looks like cool stuff for teenagers who start learning ExtJS. In fact I just did it as a demo for my friend’s son.

Take a look at the gallery of bookmarklets results below:

Another example of ExtJs bookmarklet is below:

The theme looks a bit odd and this eliminates professional applications, but if you are using this for fun it can work (for a day or two .

I have prepared skinned ExtJS samples to have a closer look of the theme, the link is as follows: http://extizeme.net/ext-2.2/examples/.

You can download the theme from Downloads section.

I am presenting Ext JS Admin Menu.

This is very simple plugin that alter wordpress’ awfull admin menu into the nice, drop-down Ext JS one. The best part is that it took about half of hour to make it happen. And this is really a good reason to check the power of Ext JS library.

The plugin includes a part of Ext JS 2.0 RC1 library and can be downloaded from downloads page.

I am aware that some people are waiting for the next (better) version of the theme, but it really requires a lot of time; it is one man hobby project, thus please be patient. Also, please do not expect finished versions here. I am just playing with Ext JS library.

Ext JS WordPress Theme Target Audience

Milord has commented the theme as follows:

it seems to be perfectly suited to using wordpress as a rudimentary knowledge base. It’s very clean and easy to navigate, with screen elements appearing and disappearing as required.
When I look at this example, I see huge potential for it in wikis on intranets. In many ways it is highly familiar to users of desktop applications, and that makes it more approachable to the technophobes

This actually was the purpose of witting the theme: to convince tehnophobes, or let’s say people who get used to desktop applications. To make long story short: the theme has been made to convince your mom and dad and … your boss, that blogging as a knowledge sharing within organizations makes sense.

Milord, I share your opinion in one hundred percent. Although, during last fourteen days of maintaining the site and reading peoples comments I have noticed that there is another target audience of the theme: gadget-addicted people. (I am a member of gadget-addicted group,also.) Thus, I have decided to make an upgrade of the theme by adding few additional gadgets into it. But, first things first:

Bugfixing

1. SEO

Many commenters have pointed out that the theme is not SEO and Ads friendly. This shall be changed in the first place. As you may notice this has been fixed already on this site. The content of the page loads without even one call of XMLHttpRequest and almost all links are permanent. Ajax starts after the page is fully loaded. For example: if you request the http://extjswordpress.net/download/ URL from your any other (then this one) site it will load the Ext JS WordPress Theme with the content of the Download page. But, if you click the link when the theme is already loaded, it will call XHR, get the content of Download page and put it into the center panel. Check this out:

This is an ordinary link: http://extjswordpress.net/download/

This is Ajax call: http://extjswordpress.net/download/

2. Ads

As you can see there is a special container for Ads on the left hand side of the page. In the feature version the idea is expanded, instead of one block there will be four blocks. Please check the list of planned changes:

3. Performance

Although the Ext JS library make heavy use of system resources (try to compare site build with and without Ext JS in Firebug), I would not worry about it in present days. One can say that the bottle neck in case of the theme is bandwidth. It is partially truth: the theme requires ~500kB of Ext JS, then there is ~80kB of CSS and ~60kB of images – now framework is loaded – the Saki’s Panel&Accordion extension (javascript and CSS): ~60kB, then ~10kB of theme CSS plus ~20kB of theme javascript. The last goes Wortpress itself: ~50kB. Together it is ~780kB.

There is a high time to do something with this and I hope I will succeed. There are 14 Yahoo Performance Rules here. On my own installation I am focusing on 7 of them:

Server Side

3. Add an Expires header
4. Gzip components
13. Configure ETags

Client Side

5. Put CSS at the top
6. Put JS at the bottom
7. Avoid CSS expressions
8. Make JS and CSS external

My tests has shown that I have reduced the full size of page from ~780kB to ~280kB having B grade in YSlow on rule no 4 (I will not gzipping images). 280kB transfer is needed for the first time the theme loads (all HTTP headers has code 200). During browsing the site Ajax calls are made (~5KB each) thus no need to worry about bandwidth. When revisiting the ExtJS flavored WordPress, all js, css and images are cached, thus the only call is the WordPress page itself (~15kB).

In short: this 15kB is what I am going to achieve.

More Gadgets

1. Optional Static Boxes

There were few people who wanted to use the theme with advertising boxes, but usually ads does not work well with Ajaxy stuff. Thus the idea is to arrange a special place for such things: not ajax, easy to update from administration panel and optional. There can be many other ways to use static-boxes. Instead of using sidebar for widgets like for example Flickr you will be able to use static-boxes.

2. Optional Left Sidebar

Josef Sakalos has upgraded his brilliant accordion extension and added a feature that allows users to move panels from one accordion to another.
Check this out here. The feature is called “linked” accordions and shall be used within Ext JS WordPress Theme to allow users to moving widgets from between sidebars. Left sidebar will be optional and administrator will decide weather to allow users to move widgets or not. Extra feature here will be “state-saving” which means that when user enters the site again all the changes she has made will remain.

3. Comments Window

If you have ever seen Jack Slocum Blog you are not surprised that comment form can be easily put into a Ext JS Window. I really like the idea. As you may see on Jack’s blog there are additional stuff there: one can comment separated paragraphs of the posts. If you are not familiar with that, you should definitely check it out.

4. Lightbox alike

Few day ago I have successfully adopter LightBox 2.0.3 plugin to this blog. After that I have realized that this does not suits here well. The plan then is to include the plugin into the theme and skin it with Ext JS window.

5. Browsing with tabs

Version 1.0 of Ext JS Theme is able to open two tabs: one with posts and the next one with recent comments. Why not adding a possibility to open posts within separate (saved from session to session) tabs? People may treat it as internal bookmarking.

Answers below.

Bugs, problems, mistakes…

This is true. I am working on it. In short, this is because of the javascript that ads insert into the code of the page. In most examples it does not work with the javascript that the theme is adding. Be patient I will fix it somehow.

It is because the theme is posting a comment via Ajax, without page refresh. This will be fixed in the next release for sure.

What can I say. It is true. I am working on it. Thank you for good design examples.

You are right. The theme is not a set of HTML and CSS files it is javascript application that makes use of ExtJS library. No chances that it will work when javascript is disabled. But, check the comment made by Marin. Meaning: be consequent. If you disable javascript then disable CSS also, this could help.

True. It does not work in old browser. Although,it works on text based browser (like Lynx). On the other hand please check the browser statistic for my site (below). Most of the people use brand new stuff. There is nothing to worry about.

This is true. The address does not change when you browse the site. But all most of the links are permanent. By this I mean, when you copy the link location, when you copy a shortcut (from the title of the post for example) and then you put it into the browser address bar, then it will go into the correct page. Simply specking, the below permanent link works correctly:
[HTML]http://extjswordpress.net/10-release/

This (on 99%) is the problem caused by incompatibility between the theme and one of the plugins you are using on your site. “Amazon Product Preview?”, “Google Analytics?”. Please give me some time I will work hard trying to fix it.

Fore sure, there will be an “Options” in the next release of the theme. You may expect header image change. For now on you are welcome to alter the theme by yourself.

Thank you for mentioning this. This is the hardest problem I had when working on the theme. I was trying to make an universal link handler but it shows without success. The current code looks as follows:

[javascript]



As you may see It is not a brilliant one, but it opens a workaround for your problem. Links with “rel” parameter set to “noajax” are not handled by the function, Try something like this

[HTML]
1.0 Release


And if you have a better alternative for the click handler then let me know, please.

You are using the theme

I really appreciate that you decided to use ExtJS base theme. It promotes not only my little work but first of all ExtJS library which IMHO is the most advanced on the market. Thank you. Keep in mind that the library is huge: ~500kB of javascript, ~80kB of CSS plus images. If you have a chance to compress on the fly it it will for sure make your site more responsive. (Unfortunately my host company do not offer it, sorry.)

You are welcome to alter the theme according your wish. Start from making adjustments on style.css. Thank you.

On lines 225-275 of js/theme.js you will find a definition of “style switched menu” simply remove it. Then go to header and change this:

[PHP]



into this, for example:

[PHP]


There are 5 ExtJS styles included into the theme: deafult (here simply remove the line), aero.css, vista.css, gray.css, galdaka.css. More style can be fonud on ExtJS forum. Start from here: http://extjs.com/forum/showthread.php?t=6039

About images links try to add “rel” paramater to the links, like this

<a href="http://extjswordpress.net/wp-content/uploads/2007/10/p2.gif" rel="noajax">Calendar</a>

Both your comments shows that I really need to solve the problem of compatibility of the theme and WordPress plugins. This is the cause. Please deactivate all your plugins first then activate them one by one and… let me know which one stopped the theme work correctly. I will try to fix it. Once again thank you very much for all of your comments. Keep checking the site, I am working on the next release.

A Minor Update…

Please, go to Admin Panel >> Presentation >> Widgets. Click Configure button on Calendar Widget and key in your tille…