Vista Gadget with Ext JS

February 15, 2008 by Jack Slocum

A while back in the Ext forums I mentioned a Forum Gadget I was working on for Windows Vista created with Ext 2.0. The gadget gives the ability to monitor the Ext JS forums (all posts or by individual forum), perform fast searches and supports both docked and undocked mode.

Undocked on the desktop
Docked in the sidebar

I finally had a chance to get it packaged up and I am hoping there will be someone out there who finds it as useful as I do. ;) At the very least, it serves of a nice example showing how easy it is to create a Vista gadget with Ext JS.

Code
The gadget file itself is just a zip file. To see the source, just save it to a file on your system, rename it to forum.zip and unzip it. There isn’t much code required, all of it is in forum.js.

The only gadget specific code (handling dock and undock) is standard javascript.

function changeDock(){
    if(System.Gadget.docked){
        System.Gadget.background = 'images/docked.png';
        var bd = Ext.getBody();
        bd.setSize(130, 250);
        bd.addClass('docked');
        cm.setHidden(1, true);
        cm.setRenderer(0, renderTopicMini);
        grid.setPosition(4, 4);
        grid.setSize(121, 241);
        toggleDetails(null, false);
    }else{
        System.Gadget.background = 'images/undocked2.png';
        var bd = Ext.getBody();
        bd.setSize(528, 383);
        bd.removeClass('docked');
        cm.setHidden(1, false);
        cm.setRenderer(0, renderTopic);
        grid.setPosition(14, 14);
        grid.setSize(494, 349);
        cm.setColumnWidth(0, 350);
        toggleDetails(null, true);
    }
}
 
System.Gadget.onUndock = changeDock;
System.Gadget.onDock = changeDock;

The gadget API provides 2 hooks for handling when a gadget is docked or undocked. In the code above, I listen for both events and handle them in a single function. That function alters the background image of the gadget (which must be set through MS API, offortunately), changes the dimensions of the gadget body and reconfigures the grid to handle the new size.

Download
Grab the forum gadget here.

More Information
- Additional info about Ext JS can be found at extjs.com.
- Additional info about Vista gadgets and the Window Sidebar can be found on MSDN including a Windows Sidebar Object Reference.

14 Responses to “Vista Gadget with Ext JS”

  1. Woah, this is very usefull. I like the idea to create vista gadgets with ext and with content of my web applications.
    Thanks for this great stuff :)

    Foggy
  2. […] Источник: Блог Джека Слокума. […]

    ExtJS-гаджеты для Windows Vista | АяксЛайн.ру
  3. That’s neat Jack but for those of us who have yet to upgrade to Vista, how would you go about making it a Google Gadget (http://code.google.com/apis/gadgets/index.html)?

    Gordon

    gordon
  4. […] he has been playing with Vista gadgets and Ext and created a forum watcher that has the following gadget special code: PLAIN TEXT JAVASCRIPT: […]

    Ajax Girl » Blog Archive » Jack is back: Ext for Air and Vista
  5. Gordon, Since there isn’t much Vista specific code, I would imagine it would be pretty easy to make it work. The major difference would be how to package it and look and feel changes.

    Jack Slocum
  6. mmh, does only work in IE for me. Firefox/Firebug says

    System is not defined (forums.js(Line 267))
    System.Gadget.onUndock = changeDock;

    wm003
  7. nice theme btw. Maybe you can extend this one to support all ext widgets and put it up on Extjs site? :)

    wm003
  8. […] er es jetzt wieder aufleben lassen und meldet er sich mit einem kleinen Highlight zurück: ein Vista Gadget , um Forenbeiträge zu überwachen. Das Gadget wird selbstverständlich auch zum […]

    Mr. Slocum bloggt wieder - dynamicinternet
  9. Extjs와 Adobe AIR를 이용한 Window.gadget만들기…

    와우~ 죽인다. Extjs와 AIR가 만나니 이런 종류의 윈도우 프로그램도 가능하구나..!! Jack Slocum 이 작성한 AIR와 ExtJS를 이용한 Vista Gadget이다. extjs.com의 AIR DOC설치후 아래 window.gadget파일을 다운로드…

    데꾸벅 - 정리되지 않은 생각들
  10. […] Okay, so Jack Slocum over at EXTJS has put together a very cool example on how to develop new Vista sidebar gadgets using the ExtJS Framework - opening up a huge realm of posibilities for developing advanced sidebar gadgets *without* ending up looking like so many of the tacky ones released on Windows Live. Take a look at this entry from Jack’s Blog: […]

    Using EXTJS to create Vista Sidebar Gadgets! | precariousPanther Web Blog
  11. actually im using ubuntu for my O.S. im a fan of your desktop.js coz i find it very useful ^_^
    i made inchancements of my own using it ….. ^_^ thanks jack ^_^ for the knowledge ive learned
    using ext js….. hope you can write a book for ext js ^_^

    lew jasson agdeppa
  12. […] […]

    vista gadgets
  13. COOL ^_^ from http://www.itzamatch.com

    lew jasson agdeppa
  14. Hello - If you have some great Gadgets you are welcome to upload them here http://www.gadgetsdownload.com if pro or amature we just want users to have a good collection to choise of. another great gadgets sent me a email on our site about price for a gadget

    Mustang

Leave a Reply

*
To prove that you're not a bot, enter this code
Anti-Spam Image