ExtJS apps as bookmarklets

Load ExtJS bookmarklet

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 Resigs bookmarklet helps. He has shown jQuery load bookmarklet here: https://johnresig.com/blog/hacking-digg-with-firebug-and-jquery/

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.appendChildss;voidss;var%20core=document.createElement’script’;core.setAttribute’src’,%20’http://extjs.cachefly.net/builds/ext-cdn-8.js’;document.body.appendChildcore;core.onload=functionExt.Msg.alert’Ext’,%20’ExtJS%20is%20loaded!’;;core.onload=functionExt.Msg.alert’Ext’,%20’ExtJS%20is%20loaded!’;;voidcore;

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, 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:

An addon to Ext Docs

During studying Ext documentation of new 3.0RC1 release, I came up with an idea that it could be nice to have new stuff highlighted. MindPatterns has got the similar idea here https://www.sencha.com/forum/showthread.php?43016-Which-Design-Pattern-ExtJS-follows

Ext Docs ext js

… <!– 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”> …

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. Learn more here about Ext Js WordPress.

It adds a 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 a 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.

Introducing ExtizeMe

I am humbly introducing the alpha preview of ExtJS WordPress theme Version 2.0a. The theme has changed its name;  its ExtizeMe. To preview the theme click its logo below. If you have JavaScript enabled in your browser you will see this site changing the layout.

What is ExtizeMe

ExtizeMe, basically, is a WordPress theme. It makes heavy use o JavaScript. Everything: layout, behavior, and look&feel need JavaScript to work. If a user browser does not have JavaScript enabled, ExtizeMe displays itself as plain HTML theme.

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

Screenshots

                              

                            

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.