Sencha Touch - Primeiro Programa

Neste capítulo, listaremos as etapas para escrever o primeiro programa Hello World em Ext JS.

Passo 1

Crie uma página index.htm em um editor de sua escolha. Inclua os arquivos de biblioteca necessários na seção principal da página html como segue.

index.htm

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js">
      </script>
      <script type = "text/javascript">
         Ext.application( {
            name: 'Sencha', launch: function() {
               Ext.create("Ext.tab.Panel", {
                  fullscreen: true, items: [{
                     title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
                  }]
               });
            }
         });
      </script>
   </head>
   
   <body>
   </body>
</html>

Explicação

  • O método Ext.application () é o ponto de partida do aplicativo Sencha Touch. Ele cria uma variável global chamada 'Sencha' declarada com a propriedade name - todas as classes do Aplicativo, como seus Modelos, Visualizações e Controladores, residirão neste único namespace, o que reduz as chances de colisão de variáveis ​​globais e nomes de arquivo.

  • O método launch () é chamado assim que a página estiver pronta e todos os arquivos JavaScript forem carregados.

  • O método Ext.create () é usado para criar um objeto no Sencha Touch. Aqui, estamos criando um objeto de classe de painel simples Ext.tab.Panel.

  • Ext.tab.Panel é a classe predefinida no Sencha Touch para criar um painel.

  • Cada classe Sencha Touch possui propriedades diferentes para realizar algumas funcionalidades básicas.

A classe Ext.Panel tem várias propriedades, como -

  • fullscreen propriedade é fazer uso de uma tela inteira, portanto, o painel ocupará espaço em tela inteira.

  • items propriedade é o recipiente para vários itens.

  • iconCls é a classe usada para exibir ícones diferentes.

  • title propriedade é fornecer o título ao painel.

  • html propriedade é o conteúdo html a ser mostrado no painel.

Passo 2

Abra o arquivo index.htm em um navegador padrão e você obterá a seguinte saída.