extbuilder

UserGuide  

ExtBuilder User Guide

 

• Introduction
• Installation
• Eclipse 3.x
• Apatana
• Starting
• Kick start
• Overview
• How to
• Set Properties
• Set Layout
• Toolbar
• Buttons
• Grid
• Tree
• Listeners
• Extension

 

Introduction

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

Installation

Eclipse 3.x

1. make sure you eclipse version is 3.2,3.3 or 3.4 with GEF installed.
2. download archived update site from http://code.google.com/p/extbuilder/downloads/list
3. Click Help->Software Updates->Find and Install...->Search for new features to install,Click Next
4. Click New Archived Site-> Browse to extbuilder_update.zip and click Open.
5. Click OK and follow the instructions to install.
6. Restart you eclipse

Apatana

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.

 

Starting

Kick start

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.

Overview

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.

 

 

Editor View

It’s a multi-pages editor contains a source code editor and a UI editor. In source code editor, you can see the real code extbuilder generate for you. Please focus the initUIComponents function. In UI editor, you can see one palette at left side and a embedded browser at right side. With the embedded browser, you can preview the code generated by ExtBuilder.

Outline View

The outline view is a component tree view. You can select specific component in the view.

Properties View

The most important view you have to deal. In this view, you can set the configuration of one component. For example: For a Panel component, you may set the title property to ‘MyPanel’, the layout property to ‘Border’, the width property to ‘100’, etc. For a GridPanel component, you may set the store property and columns property. All you change make to a component take effect immediately. Both the code editor and UI editor will change. It’s a good way to watch your settings how change the UI to your wanted style.

Drag Components

In UI editor, you can see a palette with some components in several folders. Now extbuilder supports most components in latest Ext 2.2 You could click one component, such as a Panel then move the mouse to outline view, there must be a component named panel, it's the root component of one panel class. Click the mouse again, then the root panel component now have a child panel. In the way, you can use any components and organize the component tree as you wish. Although you may think drag a component and drop it to a canvas is better, but that means ExtBuilder need to implement all Ext components drawing,behavior and layout in Java code. From my opinion, this way is the fastest way to build a GUI page.

How to

Set Properties

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.

Set Layout

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.

FormPanel

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

 

Toolbar

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 
      }

Buttons

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.

Grid

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

Store

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.