Como vincular models (com association), forms e grids no ExtJS 4? – javascript json extjs

Pergunta:


Estou utilizando ExtJS 4.2 em um projeto e estou com problemas envolvendo as associations do model e como vinculá-las à forms e grids. Vou ilustrar com um exemplo.

Tenho 3 classes e 1 json, como seguem abaixo:

Usuario

Ext.define('Usuario', {
    extend: 'Ext.data.Model',
    fields: ['id', 'nome'],

    hasMany: { model: 'Telefone', name: 'telefones' }
    hasOne: { model: 'Endereco', name: 'endereco'}
});

Endereco

Ext.define('Endereco', {
    extend: 'Ext.data.Model',
    fields: ['id', 'logradouro', 'endereco', 'numero', 'cidade', 'estado', 'usuario_id']
});

Telefone

Ext.define('Telefone', {
    extend: 'Ext.data.Model',
    fields: ['id', 'ddd', 'numero', 'usuario_id'],
});

Json usuarios

{
    "data": [
        {
            "id": 1,
            "nome": "Maria",
            "telefones": [
                {
                    "id": 1,
                    "ddd": 11,
                    "numero": 33445566
                },
                {
                    "id": 2,
                    "ddd": 12,
                    "numero": 988887777
                }
            ],
            "endereco": {
                "id": 1,
                "logradouro": "Rua",
                "endereco": "Santa Rosa",
                "numero": 6
            }
        }
    ]
}

O problema começou quando precisei salvar dados aninhados. Aí encontrei no blog da Loiane Groner uma postagem sobre salvar dados aninhados.
Funcionou! Aí veio outro problema, maior: como vincular um model com associations a um form e grid? E depois, como salvar o dado do form utilizando o model e seu proxy já configurado?

Vi que muita gente faz no próprio form um submit com a url e proxy a ser usado, mas se utilizando MVC eu já criei meu model, store e proxy, porque devo montar novamente o proxy no form e ignorar a minha estrutura já feita? Gostaria de utilizar os recursos que implementei no model, store e proxy…

Bem, encontrei um texto que mostra como fazer o vínculo (no caso de form), porém estou com dificuldades para entender a solução dele e parece que não funciona para model com associação hasOne.

Autor da pergunta José Filipe Lyra

Você pode montar uma grid usando renderer da columns.

Ext.create('Ext.grid.Panel', {
    title: 'Usuários',
    store: store,
    columns: [{
        text: 'Nome',
        dataIndex: 'nome'
    },{
        text: 'Telefones',
        renderer: function (val, meta, record) {
            var tel = '';
            record.telefones().each(function(telRecord, index, count) {
                if(tel.length>0) tel = tel + '; '
                tel = tel + '(' + telRecord.get('ddd') + ') ' + telRecord.get('numero');
            });
            return tel;
        }
    },{
        text: 'Endereço',
        renderer: function (val, meta, record) {
            var obj = record.getEndereco().data;
            var enderecos = '';
            enderecos = enderecos + obj.logradouro;
            enderecos = enderecos + ' ' + obj.endereco;
            enderecos = enderecos + ' ' + obj.numero;
            enderecos = enderecos + ' - ' + obj.cidade;
            return enderecos;
        }
    }

             ],
    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});

Exemplo (jsfiddle):

Ext.define('Usuario', {
    extend: 'Ext.data.Model',
    fields: ['id', 'nome'],

    hasMany: { model: 'Telefone', name: 'telefones' },
    hasOne: { model: 'Endereco', name: 'endereco'}
});

Ext.define('Endereco', {
    extend: 'Ext.data.Model',
    fields: ['id', 'logradouro', 'endereco', 'numero', 'cidade', 'estado', 'usuario_id']
});

Ext.define('Telefone', {
    extend: 'Ext.data.Model',
    fields: ['id', 'ddd', 'numero', 'usuario_id']
});


var data = {
    "success": "true",
    "data": [
        {
            "id": 1,
            "nome": "Maria",
            "telefones": [
                {
                    "id": 1,
                    "ddd": 11,
                    "numero": 33445566
                },
                {
                    "id": 2,
                    "ddd": 12,
                    "numero": 988887777
                }
            ],
            "endereco": {
                "id": 1,
                "logradouro": "Rua",
                "endereco": "Santa Rosa",
                "numero": 6
            }
        }
    ]
};

var store = Ext.create('Ext.data.Store', {
    model: "Usuario",
    autoLoad: true,
    data: data,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Usuários',
    store: store,
    columns: [{
        text: 'Nome',
        dataIndex: 'nome'
    },{
        text: 'Telefones',
        renderer: function (val, meta, record) {
            var tel = '';
            record.telefones().each(function(telRecord, index, count) {
                if(tel.length>0) tel = tel + '; '
                tel = tel + '(' + telRecord.get('ddd') + ') ' + telRecord.get('numero');
            });
            return tel;
        }
    },{
        text: 'Endereço',
        renderer: function (val, meta, record) {
            var obj = record.getEndereco().data;
            var enderecos = '';
            enderecos = enderecos + obj.logradouro;
            enderecos = enderecos + ' ' + obj.endereco;
            enderecos = enderecos + ' ' + obj.numero;
            enderecos = enderecos + ' - ' + obj.cidade;
            return enderecos;
        }
    }
             
             ],
    height: 200,
    width: 500,
    renderTo: Ext.getBody()
});
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all-debug.css"
/>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.js'></script>

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *