Simple Steps to Understanding ExtJS

August 21st, 2009 by aditia rahman / 6 Comments  


ExtJS is one of the most popular javascript user interface framework, it offer a bunch of great user interface component, if you are a Java Programmer it better you use the Ext-GWT, but if you are a web programmer who always using web scripting language such as PHP, it may be painless if you learn the new web interface beside the traditional HTML, but i did it and mix it with Codeigniter in purpose to create and maintain better PHP code, and it’s not really bad and here some advice I have for you :

1. Follow the examples

Ext-ExamplesExtJS come with a bunch of great sample use of using widget, this provide the basic use of the component, creating plugin, etc. This is the best way to know what you can do with the component and how to implement the component by viewing the source code, if you somehow don’t understand what the code means, simply you can consult the API documentation first. Just download it first and run on your local server or you can view it online.

2. Read the ExtJS tutorial

Tutorials - Learn About the Ext JavaScript Library_1250977156212So, you are ready to get your hand wet ? but don’t know what to do to digging depper to understanding ExtJS, I suggest you start with tutorial from the ExtJS official site. It’s cover about the getting started guide, dom query helper, combobox, form, grids, drag & drop, menus, tree, etc, even the basic of the application design and some of them provide the downloadable example source code. Although the tutorial is useing version 1.x and 2.x, yes it is compatible if you are using version 3.

3. Don’t fear to read the API

Ext 3.0 - API Documentation_1250974839663 The ExtJS API documentation come with the bundle when you’re downloading ExtJS. So how this gonna be useful ? well for me it provide very useful information about the Ext core and default config options, properties, events, method for each component, it’s a good reference when you are trying to manipulating the component. Some component given the basic example of usage. Just download the ExtJS bundle and you can find it in examples folder or you can view it online

4. Consult the spesific question to the forum

extjs reconfigure proxy url - Telusuri dengan Google_1251076695170When I get some trouble I always use Google first, type your spesific question on Google and most of the solution found in the ExtJS official forum and i always found the solution is very handy and easy to understand. Even some of the expert member provide advance source about ExtJS like quick search plugin, grid paging row numberer and custom themes and you can download it for free.

5. Use the good IDE

netbeans-extjs Since you use ExtJS in javascript language, the you must code all the ExtJS component by hand, and you need the good IDE to help you browse the all avaliable API. I’m personally using Netbeans PHP IDE for my project, you can set the project and include the ExtJS style, ExtJS basic and ExtJS all. The IDE will scan all the project including the ExtJS file and when you code the ExtJS component or ExtJS core, you can type shift + space on your keyboard and the IDE will give an autocomplete feature, and it helping me a lot, maybe not all the method shown in the autocomplete feature but you still can browse on the API documentation. If your not the fan of Netbeans, you can use other great IDE like Eclipse or Aptana.

6. You may need to know a bit about Javascript Language

My experience is when i code the event handler of the component, sometimes need like client side validation, like is defined object, sel length etc. When you found this trouble just googling about spesific javascript question and it’is not really hard.

more ExtJS Resource and tutorial

Video tutorial from EXTJS.TV bunch of ExtJS Tutorial a blog about ExtJS tutorial

Example ExtJS in Action some of link not working but the ExtPlorer is good.

TuturTinular a blog who have some ExtJS tutorial

ExtJS and WordPress wordpress themes usign extjs and it’s free to download

Using ExtJS grid in WordPress Admin

Integrating CakePHP and ExtJS

        submit to reddit Delicious

6 Comments Leave a Comment Subscribe RSS

  • PRABHJEET says:

    i m also learning it for codeigniter projects.
    this post is very helpfull


  • zam says:


    Hi.. can you post another blog about how to integrate extjs api and code completion into netbeans IDE?


    • aditia says:

      hi zam, basically when you include extjs file in your header, Once i’m working with codeigniter and extjs, netbeans will automatically get the extjs api from the original extjs source that you included, but need some time to share my simple work using codeigniter and extjs with you on the next blog post … just wait. I’m working on it.

  • Prabhjeet says:

    Good post. I use PHP DESIGNER for coding. and it has autocomplete features for extjs already. I too use CI

    • yeah PHP Designer really good editor too, I use it when PHP Designer 2005 released, but since is not free anymore, i’m stop using it. But maybe I’ll try the latest trial version to see extjs auto completion, thx for your info Prabhjeet

Leave a Comment