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