Building ExtJs Widgets in Smalltalk

January 22, 2011

Smalltalk ExtJs Widgets

Smalltalk ExtJs Widgets

The image above shows an ExtJs text window created with 12 lines of Smalltalk code.

ExtJs (now part of is the most capable JavaScript library that I am familiar with. Here is a link to their documentation.

In a previous post, I briefly described the JavaScript version of the Silver Smalltalk interpreter (STVM.js is about 112 kb) and I mentioned that it can integrate with several JavaScript libraries such as ExtJs and jQuery/UI. I have decided to start with ExtJs because of its completeness. Note that the interpreter (STVM.js) remains the same regardless of the library – only the Smalltalk code for primitives is dependent upon the library chosen.

There are several ways to build ExtJs widgets. My preferred pattern is to create a configuration object and send it to the “ComponentMgr” to perform the actual instantiation.

Here are the 12 lines of Smalltalk code that produced the text window example above:

| d1 d2 |
d1 := Dictionary new.
d1 at: 'xtype' put: 'textarea'.
d2 := Dictionary new.
d2 at: 'xtype' put: 'window'.
d2 at: 'layout' put: 'fit'.
d2 at: 'initHidden' put: false.
d2 at: 'items' put: d1.
d2 at: 'width' put: 425.
d2 at: 'height' put: 375.
d2 at: 'title' put: 'Smalltalk in JavaScript'.
ComponentMgr create: d2

You can copy the above code into the workspace, highlight it, and “PrintIt” – a new text window should open.

ExtJs runs in all popular browsers including older versions without requiring any plug-ins. I have successfully used it on IE6 running on Windows 2000 behind a corporate firewall without a problem. It is, however, rather large (~650 kb) so smaller libraries could be better for lightweight applications (eg phones or clients with slow connections).

Over the next few days, I will be extending the Smalltalk JavaScript library to include a documentation browser, a forum, and an instant message/chat application.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: