Ao mergulhar no ecossistema Sencha Touch, muitos desenvolvedores ficam impressionados com a vasta gama de componentes disponíveis. Embora estes facilitem a criação de interfaces ricas, a verdadeira força e flexibilidade do framework residem em seu robusto sistema de classes. É essa arquitetura orientada a objetos que permite o desenvolvimento de aplicações escaláveis e bem organizadas, servindo como a espinha dorsal para todos os componentes, plugins e APIs.

O Sistema de Classes do Sencha Touch

O Sencha Touch adota um sistema de classes próprio que facilita a construção de aplicações JavaScript de forma organizada e modular. Inspirado em conceitos de linguagens orientadas a objetos, ele oferece mecanismos para definição de classes, herança e gerenciamento de dependências.

A documentação oficial do Sencha fornece um guia detalhado sobre o sistema de classes e o greenciador de classes (Ext.ClassManager).

Para definir uma nova classe, utiliza-se o método Ext.define(), que aceita o nome da classe e um objeto de configuração com suas propriedades e métodos:

Ext.define('EntidadeBase', {
    // Propriedade inicial
    identificador: 'Desconhecido',

    // Construtor da classe: método executado ao instanciar
    constructor: function(id) {
        if (id) {
            this.identificador = id;
        }
        return this; // Permite encadeamento de chamadas de métodos
    },

    // Método para descrever uma ação
    realizarAcao: function(descricaoAcao) {
        console.log(`A entidade '${this.identificador}' está realizando: ${descricaoAcao}`);
        return this;
    }
});

A criação de uma instância de classe pode ser feita de algumas maneiras, sendo a mais comum em Sencha Touch o uso de Ext.create(), embora a sintaxe new também funcione:

var minhaEntidade = Ext.create('EntidadeBase', 'Objeto 1');
// ou
var outraEntidade = new EntidadeBase('Objeto 2');

É crucial lembrar de instanciar as classes quando necessário. O Sencha Touch, no entanto, oferece recursos para o carregamento e instanciação automática de classes essenciais, especialmente em configurações de aplicação, através das propriedades requires, views, models e stores:

requires: [
    'Ext.MessageBox',
    'Ext.data.proxy.JsonP',
    'Ext.dataview.List'
],
views: [
    'Main', // Carrega 'app/view/Main.js'
    'MinhaApp.view.Informacoes' // Carrega 'app/view/Informacoes.js'
],
models:[
    'MinhaApp.model.DadosItem'
],
stores:[
    'MinhaApp.store.ListaDados'
]

A herança é um pilar do desenvolvimento orientado a objetos. Em Sencha Touch, uma classe pode estender outra utilizando a propriedade extend. Isso permite a reutilização de código e a criação de hierarquias de classes.

Ext.define('Programador', {
    extend: 'EntidadeBase', // Estende a nossa classe base
    
    // Propriedade específica para a classe Programador
    ehExpert: false,

    // Construtor com parâmetro adicional e chamada ao construtor pai
    constructor: function(id, expertStatus) {
        this.ehExpert = expertStatus;
        // Chama o construtor da classe pai (EntidadeBase)
        this.callParent([id]); 
        return this;
    },

    // Método para simular uma atividade específica
    codificar: function(linguagem) {
        console.log(`O programador ${this.identificador} está codificando em: ${linguagem}`);
        // Utiliza um método da classe pai
        this.realizarAcao("depurar código");
        return this;
    }
});

Estrutura Básica de um Projeto Sencha Touch

A organização de um projeto Sencha Touch segue uma estrutura padrão que facilita o desenvolvimento e a manutenção. A ferramenta Sencha Cmd é fundamental para gerar essa estrutura automaticamente. Mais detalhes podem ser encontrados no guia de aplicações Sencha Cmd.

O arquivo app.js é o ponto de entrada principal de qualquer aplicação Sencha Touch. Ele configura o carregador de classes, define as dependências e inicializa a aplicação:

Ext.Loader.setPath({
    'Ext': 'touch/src', // Caminho para a biblioteca Sencha Touch SDK
    'MinhaApp': 'app' // Caminho base para os arquivos da sua aplicação
});

Ext.application({
    name: 'MinhaApp', // Nome da aplicação

    // Classes que a aplicação necessita para iniciar
    requires: [
        'Ext.MessageBox',
        'Ext.data.proxy.Ajax', // Exemplo de proxy de dados
        'Ext.navigation.View'  // Exemplo de componente de navegação
    ],

    // Definição das visualizações (views) da aplicação
    views: [
        'Principal', // View principal, geralmente localizada em app/view/Principal.js
        'MinhaApp.view.DetalhesItem' // Exemplo de view aninhada
    ],
    // Modelos de dados utilizados pela aplicação
    models: [
        'MinhaApp.model.Usuario' // Exemplo de modelo, em app/model/Usuario.js
    ],
    // Stores para gerenciamento de dados
    stores: [
        'MinhaApp.store.Usuarios' // Exemplo de store, em app/store/Usuarios.js
    ],

    // Configurações de ícones e telas de inicialização para dispositivos móveis
    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },
    isIconPrecomposed: true,
    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    // Método executado após o carregamento de todas as dependências da aplicação
    launch: function() {
        // Remove o indicador de carregamento inicial da página
        Ext.get('appLoadingIndicator').destroy();

        // Cria e adiciona a view principal ao Viewport do Sencha Touch
        let mainView = Ext.create('MinhaApp.view.Principal');
        Ext.Viewport.add(mainView);
    },

    // Função para lidar com atualizações da aplicação (PWA-like)
    onUpdated: function() {
        Ext.Msg.confirm(
            "Atualização da Aplicação",
            "Esta aplicação foi atualizada para a versão mais recente. Deseja recarregar agora?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});