Ext Builder练习 （翻译中。。。）

本文源自网页的部分翻译。来自 http://code.google.com/p/extbuilder/wiki/UserGuide 

开始

1. 点击 Windows->Preferences..->ExtJs Builder
2. 点击Browse 按钮来选择本地的 Ext home 目录.

1. 点击File->New, then 选择Web->ExtJs Page. a 向导对话框后会弹出来.

   

2. 点击Next

   

3. 输入namespace
4. 输入 class name , extbuilder对于每一个文件创建一个类，和java类似
5. 输入文件名,默认就是类名
6. 选择父类，默认是 Ext.Panel, 你依然可以创建一个基于Ext.Window 的窗口
7. 点击Finish.
8. Ext builder 为生成两个文件,比如: CorpSelectPanel.ext 和CorpSelectPanel.js. 第一个文件是Ext builder自己使用的内部文件,第二个文件是给用户的JS文件.

总揽

在开始使用并创建Ext页面之前，你需要确保打开了两个视图，一个是Outline一个是Properties。如果没有打开，请通过单击Window->Show View 来打开他们。

 

FormPanel练习

1. 创建一个新的Ext 页面。
2. 增加一个 FormPanel 到根节点 panel 。（左侧选择控件，然后在右侧的根节点上单击即可）。
3. 选择 这个FormPanel's 布局（layout ）为 'column' 。
4. 增加两个 Panels到这个 FormPanel, 并且设置列宽百分比为（columnWidth） '.5' ，表示各占百分之50。
5. 设置这两个新加入的 Panels的布局（ layout）为 'form'，【可以从下拉列表中选】 。
6. 对这两个Panel 分别增加两个文本区控件（ TextField）  。

现在就得到了如下的效果，在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.