How to build your first project using ExtJS framework? Here’s shortly all instructions to quickly start a project using ExtJS libraries.

First of all, download SDK libraries from the ExtJS site. In the archive you’ll find install instructions; simply you’ll need only these files:

• ext-base.js, from adapter/ext folder (or another base if you’ll use it combined with another framework)
• ext-all.js (compressed version) or ext-all-debug.js (obviously for debugging)
• ext-lang-xx.js from folder source/locale to get ext in your language
• resource folder (keeping only default themes and only ext-all.css file)

Now to use it you can just create a web page and include the 3 specified .js files, in the same order as written above. Then include ext-all.css in the page, and voila, Ext is installed in your page.

To begin, read some tutorial, and start with the examples you find online, or also in the same SDK archive file. The API documentation is available online, and also offline (you need to install AIR support). A good resource to get confronted is the community forum, and a custom google search on it.
For the development you’ll need a JS IDE, I suggest Spket, standalone or included as plugin of Aptana or Eclipse. In Jack Slocum’s blog (ExtJS founder) you’ll find all instructions to install the IDE and to configure a Javascript Profile to get autocomplete for ExtJS. There’s also this page where you can find a lot of resources.

Chrome is new open source browser developed by Google, outed today (ops…yesterday, midnight is past), and it’s really a revolution. You could imagine a super sofisticated browser, and insted Google suprises all as always.
It has a really simple and clear interface, for every user.
It’s really rapid with javascript, thanks to its js virtual machine. Yes, it isn’t a Java virtual machine but a Javascript virtual machine. It improves a lot js code execution, and the result is that you get a page in milliseconds.
Only a bar, Omnibox, you’ll never lose yourself with too many bars. It’s similar to Firefox 3 awesome bar, but it includes also search bar.
One process for every tab, a problem on a tab doesn’t affect all opened browser tabs and garbage collection is better managed.
No need to set full screen mode: tabs are displayed at top to save space, and there aren’t too many toolbars or status bars.
Homepage contains 9 thumbnails of most visited sites, most recently bookmarked pages and history search.
And finally a pearl…options are spitted in three tabs: Basics, Minor Tweaks, Under the Hood (in Italian: Impostazioni di base, Piccoli ritocchi, Roba da smanettoni)…really funny

I evaluate this as a killer application that will have a great part of market. Now is only a beta test but I see a pink future for this browser; Google always introduces great innovations and applications but I think this will be the better program.

You can read a long but exaustive comics review, watch tutorial videos or read other reviews: Mozilla Links - comparison with Firefox; Mozilla Links - Browser Wars II

Google Chrome download

What do you think about?

Standard Css doesn’t allow scrollbars customizations, only color changes are allowed with only ie-compatible css code.

I found three solutions to realize a custom scrollbar:

• jsScrollbar
• Mootools styled scrollbar
• jQuery slider gallery

The first, jsScrollbar, is simply the best and the more customizable scrollbar. It uses div blocks which are js manipulated to simulate a scrollbar and get a totally custom bar. You can read the tutorial and get a scrollbar like this.

Mootools styled scrollbar is another good solution to specify your scroolbar.

The last, jQuery slider gallery creates the same effect used on Apple’s web site, an horizontal scroll with text within.

JSLint is probably the most powerful Javascript online syntax checker. It finds errors you have never thinked they could be exist. In fact the author gives you a warning: JSLint will hurt your feelings. It’s damn true, but it’s also a js tool you can’t live without more.
Just paste your code and push JSLint button, you’ll get all errors, warnings, and a detailed list of your variables and functions. You can customize your inspection, disabling some unwanted checks, just read the documentation. Inspection is all client-side (of course made with javascript), so don’t worry about your code privacy.

I didn’t find a free text editor to indent code, but I found this powerful beautifier. I use it to format js or json code. For example, Firebug can track ajax calls and shows the json response (unformatted). With this tool you can paste the response body, indent it, and finally read the content without going crazy…

Ext JS (Ext) is a javascript-based framework for developing Rich Internet Applications, and it’s simply wonderful.
Other Javascript frameworks like JQuery, Prototype and many others are powerful and let you make web pages cooler and more interactive, but their limits are evident. Yes, your web pages will be shorter than plain javascript files but if you wanna develop web applications or someother more complex, you need other, you need Ext.
Ext has many built-in components, which enables you with only a little lines of javascript to create an evoluted graphical user interface, with associated events. You can build forms with embedded form validation, data grid with dynamic options like editing or sorting, or you can simulate a desktop environment with windows in a web page. And more: feed readers, tabbed windows, trees, dynamic loaded combos, and all you can need. It’s also skinnable and customizable. It’s cross-browser compatible, and you don’t need to worry about browser incompatibilities.
And the magic of this tool is that you can forget all javascript functions, you’ll need to know only javascript and json syntax, all the rest is Ext and only Ext.
It’s used by many important and famous customers and that’s a sign of reliability and powerfulness of this framework. You find the customers list in home page. There’ s a complete and well explained documentation, and there are also nice examples to begin learning, some tutorials and a forum to get support.

A comparison between some frameworks
Read a related discussion about ajax frameworks (Italian)
Another review (Italian)

I’m an ExtJS developer, so contact me to get consultancy.

If you’re using a Mootools Accordion on Internet Explorer 7, sometimes it doesn’t open on item specified in show property.
You can simply fix this bug without using show property but calling Accordion.display method immediately after accordion creation, so you’ll get open item also in IE.

View Accordion documentation

E’ un luogo comune il fatto che gli script javascript vadano inclusi dentro il tag head della pagina. Con l’approdo di ajax sul web, javascript è più utilizzato che mai e il caricamento di tutti i javascript nell’header della pagina rallenta il completamento della pagina. Per questo possono essere inclusi anche dopo, dentro al body, semplicemente prima del loro utilizzo. Certo che inserirli tutti insieme nell’header rende il codice più ordinato, ma in questo modo almeno parte della pagina si è già caricata e l’utente non deve attendere troppo per vedere qualcosa.
Dipende anche dall’utilizzo che se ne fa di questi script; per esempio uno script di validazione delle form come JSValidate è inutile caricarlo nel file header del vostro sito perchè è utile solo dove ci sono delle form, basterà caricarlo nelle pagine opportune. Script come quello di Google Analytics possono essere caricati tranquillamente nel vostro file di footer, prima della chiusura del body, così sarà presente in tutte le pagine e non inficierà sul caricamento del resto della pagina. Se usate script grafici in tutta la pagina, come scriptaculous o mootools, converrà includerli nell’header, in modo che la pagina sia interattiva il prima possibile rispetto ai tempi di visualizzazione della stessa.
Un’altro stratagemma per evitare il rallentamento dei javascript è l’uso dell’attributo defer nel richiamo dello script:

<script src="library.js" type="text/javascript" defer="defer"></script>

che però funziona diversamente a seconda del browser. Inizialmente era stato pensato per caricare lo script al termine del caricamento della pagina; IE invece ha reinterpretato quest’attributo, caricando il file nel momento del richiamo, ma eseguendo il codice all’interno dello script in differita, solo quando la pagina è stata caricata.
Personalmente utilizzo defer solo quando non posso farne a meno, preferisco il primo metodo che è cross-browser e più performante.

Vedi anche:
quirksmode.org
hunlock.com

1. Cercare la locazione in cui punterà la mappa in maps.google.com
2. Cliccare su “Link to this page” e prelevare il parametro ll dal codice dell’iframe, che sarà tipo ll=12.325678,34.567890
3. Recarsi su code.google.com/apis/maps/ e cliccare “Sign up for a Google Maps API key”, aderire e inserire il dominio di destinazione della mappa
4. Prelevare la chiave e il codice per quel dominio
5. Il codice consiste in:
   • Due tag script; la chiave è già quella giusta, sostituire in GLatLng latitudine e longitudine prima prelevate (il parametro ll)
   • funzione load
   • chiamate a load e unload nel body
   • tag div dove inserire la mappa

Voilà, il codice per la mappa è pronto, copiare la nuova pagina generata nel vostro sito o inserire gli elementi citati nel punto 5 in una pagina esistente.
Per aggiungere funzionalità aggiuntive, si può consultare la documentazione.

19/7/2008 UPDATE
The code isn’t valid anymore. Read the comments.

In Thickbox css code there are some hacks that doesn’t validate the code (only css, rather xhtml is valid).
Invalid code is javascript inline css document. So, I changed invalid code with a js function call. Take an example:

* html #TB_overlay { /* ie6 hack */
position: absolute;
/*height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’); NOT VALID*/
height: expression(fixHeight(document.body.scrollHeight, document.body.offsetHeight)); //VALID
}* html #TB_window { /* ie6 hack */
position: absolute;
/* margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + ‘px’); NOT VALID */
margin-top:expression(fixMarginTop(this.offsetHeight,document.documentElement,document.body.scrollTop)); //VALID
}

So substitute expression inline in css file with calls to fuctions externally defined, and load the following file whenever you’re using thickbox in your site:

expressions.js:

function fixHeight(scrollHeight, offsetHeight)
{
return (scrollHeight > offsetHeight ? scrollHeight : offsetHeight + ‘px’);
}
function fixMarginTop(offsetHeight,documentElement,scrollTop)
{
return (0 - parseInt(offsetHeight / 2) + (TBWindowMargin = documentElement && documentElement.scrollTop || scrollTop) + ‘px’);
}

To use Thickbox now you need these loadings:

<script src="/lib/thickbox/jquery.js" type="text/javascript"></script>
<script src="/lib/thickbox/thickbox.js" type="text/javascript"></script>
<script src="/lib/thickbox/expressions.js" type="text/javascript"></script>
<style type="text/css"> @import "/lib/thickbox/thickbox.css"; </style>

Download Thickbox 3.1 editated sources:
thickbox.css (editated)
expressions.js (added)