ExtBuilder is an eclipse plugin can help developer work out good style Ext javascript code without typing code.

1. Install Apatanta as a plugin to Eclipse.
2. Install ExtBuilder to Eclipse

Note: Apatana Studio removed some build-in plugins from Eclipse, such as GEF,icu,JDT,etc. If you definitely want to use Apatana Studio without eclipse, please install these plguins first.

1. Click Windows->Preferences..->ExtJs Builder
2. Click Browse button to select your Ext home directory.

1. Click File->New, then select Web->ExtJs Page. a wizard dialog will appear.



2. Click Next



3. Input the namespace you want
4. Input class name you want, extbuilder create one class in one file, just like Java
5. Input the file name, default is the class name
6. Select super class, default is Ext.Panel, you also can create a window by select Ext.Window
7. Click Finish.
8. Then there are two files created in Package Explorer, for example: CorpSelectPanel.ext and CorpSelectPanel.js. The first file is used by extbuilder, the second file is the script file for you.

Before you start to editing a Ext page, make sure you opened Outline View and Properties View. If not, please click Window->Show View to open these two views.

Ext component have many properties. ExtBuilder divide these properties into two categories: common properties and advanced properties. By default, only common properties are shown,you can show advanced properties by click the Advanced button at the top toolbar of Properties View. Properties can be string, integer,drop down list. Some special properties like store, toolbar,buttons,columns Model will pop up a dialog for user set.

There are two panels, one parent, one child.

1. Create a new Ext page
2. Set the root panel's tilte to 'ParentPanel'
3. Add a Panel to page root panel component
4. Set the child panel's title to 'ChildPanel'
5. Click the parent panel on outline view
6. Set the parent panel's layout to 'Border'
7. Click the child panel on outline view
8. Set the child panel's region to 'center'

Because Ext border layout require a center region component, so when you set the layout to 'border', and not set the child panel's region to 'center', you may see some error message in browser, it's not a bug of ExtBuilder.

1. Create a new Ext page
2. Add a FormPanel to root panel
3. Set the FormPanel's layout to 'column'
4. Add two Panels to FormPanel, set columnWidth to '.5'
5. Set these two Panels's layout to 'form'
6. Add 4 TextField to these Two Panel, each have two

Then you get a two column form panel

Each Ext Panel has two toolbars, tbar and bbar.

1. Click one Panel of Outline view.
2. Click Properties view, scroll to tbar or bbar property
3. Click the right side button '...' to show Toolbar Settings Dialog
4. In Toolbar Settings Dialog, click Add Button(+) to add Button,Separator,Spacer,Fill,TextItem and MenuButton. Menu editing is not ready in current version.
5. Change the text toolbar text, by default, the handler is as "onButtonTextClick". Of course, you can change the handler function name.
6. Then switch to Source code Editor, see what happened.

         tbar : new Ext.Toolbar([{ 
                                handler : function(button, event) { 
                                        this.onButtonClick(button, event); 
                                }.createDelegate(this), 
                                text : "button" 
                        }])

Look at this code block, I use a little trick. Because ExtBuilder need to show preview page for users, some javascript errors will make the preview page as blank page. So I have to make it runs fine when renderer ext components. You may need to write your own event handler function in your class. For example:

      ..., 
      onButtonClick : function(button, event){ 
         // your code here 
      }

Each Panel has one buttons property. Just same as Toolbar buttons editing except the component can add here is only Ext.Button. You can use buttonAlign to align button at left,right or center.

ExtBuilder support three grid panels. GridPanel,PagingGridPanel and EditorGridPanel. PagingGridPanel is a gridpanel with paging toolbar on bottom.

Store can take data from remote(HttpProxy) or local(MemoryProxy). Here is a example we use MemoryProxy to build grid.

1. Click '...' button to show Store Settings Dialog
2. Select MemoryProxy in Basic Page
3. Click Sample button to generate some random data
4. Click OK button to save store settings.
5. Add loadData function in class

    loadData : function() { 
                    this.store1.load(); 
        }

here store1 is the component name of store.

1. Add code in class constructor function

     system.CorpSelectPanel = function(config) { 
            Ext.applyIf(this, config); 
            this.initUIComponents(); 
            system.CorpSelectPanel.superclass.constructor.call(this); 
            //load store data here 
            this.loadData(); 
         };

Now, you can see the data at preview page.