1. certifique-se de eclipse versão é 3.2,3.3 ou 3.4 instalado com o GEF.
2. site de download de atualização arquivados em http://code.google.com/p/extbuilder/downloads/list
3. Clique em Help-> Software Updates-> Find and Install …-> busca de novos recursos para instalar, clique em Next
4. Clique em New Archived Site-> Procure extbuilder_update.zip e clique em Abrir.
5. Clique em OK e siga as instruções para instalar.
6. Reinicie o eclipse

1. Apatanta como instalar um plugin para Eclipse.
2. Instale ExtBuilder para Eclipse

Nota: Studio Apatana retirados alguns plugins build-in do Eclipse, como o GEF, UTI, JDT, etc Se você quer definitivamente usar Studio Apatana sem eclipse, instale estes plguins primeiro.

1. Clique em Windows> Preferences ..-> ExtJs Builder
2. Clique no botão Browse para selecionar o diretório home ext.

1. Clique em File-> New e selecione Web> ExtJs Page. um diálogo do assistente será exibido.



2. Clique em Avançar



3. Introduza o nome que você quiser
4. Entrada de nome da classe que você quer, extbuilder criar uma classe em um arquivo, assim como o Java
5. Introduza o nome do arquivo, o padrão é o nome da classe
6. Selecione super classe, padrão é Ext.Panel, você também pode criar uma janela, selecione Ext.Window
7. Clique em Concluir.
8. Depois, há dois arquivos criados no Package Explorer, por exemplo: CorpSelectPanel.ext e CorpSelectPanel.js. O primeiro arquivo é usado por extbuilder, o segundo arquivo é o arquivo de script para você.

Antes de começar a editar uma página Ext, certifique-se de que você abriu vista de destaques e ver as propriedades. Se não, por favor clique em Janela-> Mostrar Exibir para abrir estes dois pontos de vista.

É um editor de páginas contém um editor de código-fonte e um editor de interface do usuário. No editor de código-fonte, você pode ver o código real extbuilder gerar para você. Por favor, o foco initUIComponents função. No editor de interface do usuário, você pode ver uma paleta na lateral esquerda e um navegador embutido na lateral direita. Com o browser embutido, você pode visualizar o código gerado pelo ExtBuilder.

A vista de destaque é uma árvore de componentes. Você pode selecionar componente específica na vista.

A opinião mais importante que você tem que lidar. Nesta exibição, você pode definir a configuração de um componente. Por exemplo: Para um componente Panel, você pode definir a propriedade de título para “myPanel ‘, a propriedade de layout para’ Fronteiras ‘, a propriedade largura de ‘100′, etc Para um componente GridPanel, você pode definir a propriedade de armazenar e propriedade colunas. Tudo o que você faz para alterar um componente em vigor imediatamente. Tanto o editor de código e editor de interface irá mudar. É uma boa maneira de observar as suas configurações como mudar a interface do usuário para o seu estilo queria.

No editor de interface do usuário, você pode ver uma paleta com alguns componentes em várias pastas. Extbuilder Agora suporta a maioria dos componentes na última Ext 2,2 Você pode clicar em um componente, como um painel, em seguida, mova o mouse para a vista, deve haver um componente chamado painel , é o componente de raiz de uma classe painel. Clique com o mouse novamente, o componente Painel de raiz tem agora um painel de criança. Da mesma forma, você pode usar todos os componentes e organizar a árvore de componentes como você deseja. Embora você possa pensar arrastar um componente e largá-lo para uma tela é melhor, mas isso significa ExtBuilder necessidade de implementar todos os componentes de desenho Ext, comportamento e layout em código Java. De minha opinião, este caminho é o caminho mais rápido para construir uma página GUI.

Componente Ext têm muitas propriedades. ExtBuilder dividir essas propriedades em duas categorias: comum propriedades e propriedades avançadas. Por padrão, apenas as propriedades comuns são mostrados, você pode mostrar as propriedades avançadas pelo clique no botão Avançado na barra superior de Propriedades de Visualização. Propriedades podem ser string, inteiro, na lista suspensa. Algumas propriedades especiais, como armazenar, barra de ferramentas, botões, colunas de modelo irá aparecer uma janela para definir usuário.

Há dois painéis, um pai, um filho.

1. Criar uma nova página Ext
2. Definir tilte o painel de raiz para ‘parentPanel’
3. Adicionar um Painel de componente do painel de raiz
4. Definir o título do painel de criança a ‘ChildPanel’
5. Clique no painel pai na vista de destaques
6. Definir layout do painel de pais para a ‘fronteira’
7. Clique no painel infantil na vista de destaques
8. Definir região do painel central para criança ‘

Porque Ext layout transfronteiras exige uma componente região centro, assim quando você definir o esquema de “fronteira”, e não definida a região do painel infantil de ‘centro’, você poderá ver alguma mensagem de erro no navegador, não é um bug do ExtBuilder. 

FormPanel

1. Criar uma nova página Ext
2. Adicionar um FormPanel a raiz do painel
3. Definir o layout da coluna para FormPanel ‘
4. Adicione dois painéis para FormPanel, defina a columnWidth ‘.5′
5. Definir layout estes dois painéis de forma a ”
6. Adicionar 4 TextField para Painel estes dois, cada um, dois

Então você começa um painel de duas forma de coluna

Cada painel Ext tem duas barras de ferramentas, tbar e bbar.

1. Clique em um Painel de vista de destaques.
2. Clique em Exibir Propriedades, seleccione a propriedade ou tbar bbar
3. Clique no botão do lado direito’…’ mostrar barra de diálogo Configurações
4. Na barra de diálogo Configurações, clique no botão Adicionar (+) para adicionar Button, Separator, Spacer, Preenchimento textitem e MenuButton.Menu de edição não está pronto na versão atual.
5. Alterar o texto da barra de ferramentas de texto, por padrão, o manipulador é como “onButtonTextClick”. Naturalmente, é possível alterar o nome da função do manipulador.
6. Então mude para o editor de código fonte, veja o que aconteceu.

          tbar: Ext.Toolbar novo ([(handler: function (botão, evento) (this.onButtonClick (botão, event);). CreateDelegate (este), text: "botão")])

Olhe para este bloco de código, eu uso um pequeno truque. Porque ExtBuilder precisa mostrar página de visualização para os usuários, alguns erros de javascript vai fazer a página de visualização de página em branco. Então eu tenho que fazer ele funciona bem quando os componentes do processador ext. Pode ter necessidade de escrever o seu próprio função de manipulador evento em sua classe. Por exemplo:

  ...,
       OnButtonClick: função (botão, evento) (
          / / Seu código aqui
       )

Cada painel tem um botão de propriedades. Só mesmo os botões da barra de ferramentas de edição, exceto o componente pode adicionar aqui é só Ext.Button. ButtonAlign Você pode usar o botão para alinhar à esquerda, direita ou centro.

ExtBuilder apoiar três painéis de grade. GridPanel, PagingGridPanel e EditorGridPanel. PagingGridPanel é um GridPanel com barra de paginação na parte inferior.

Loja pode ter dados remoto (HttpProxy) ou local (MemoryProxy). Aqui está um exemplo que usamos para construir MemoryProxy grade.

1. Clique’…’ botão para mostrar Store diálogo Configurações
2. Selecione MemoryProxy em BÁSICA
3. Clique no botão de exemplo para gerar alguns dados aleatórios
4. Clique no botão OK para salvar as configurações da loja.
5. Adicionar loadData função em sala de aula

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

loja1 aqui é o nome do componente da loja.

1. Adicione o código em função do construtor de classe

  função system.CorpSelectPanel = (config) (
         Ext.applyIf (this, config);
         this.initUIComponents ();
         system.CorpSelectPanel.superclass.constructor.call (this);
         / / carregar dados loja aqui
         this.loadData ();
      );

Agora, você pode ver os dados na página de visualização. 

Font: http://code.google.com/p/extbuilder/wiki/UserGuide#Introduction