1. #1
    Sencha User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Location
    Curitiba - PR / Brasil
    Posts
    305
    Vote Rating
    5
    Answers
    16
    fabio.policeno is on a distinguished road

      0  

    Default Answered: Relationship Model, one proxy for each model

    Answered: Relationship Model, one proxy for each model


    Hello,

    I tried various ways to list the name of the selected state of the city (the state name listed is incorrect), but without success. I wonder if it's possible the relationship between the models work with a proxy in each model, as in the example below.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript">
    
        Ext.define('Estado', {
            extend: 'Ext.data.Model',
            fields: ['id', 'nome'],
            proxy: {
                type: 'ajax',
                url: 'estado.json',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            },
            hasMany: {model: 'Cidade', name: 'cidades'}
        });
    
        Ext.define('Cidade', {
            extend: 'Ext.data.Model',
            fields: ['id', 'nome', 'id_estado'],
            proxy: {
                type: 'ajax',
                url: 'cidade.json',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            },
            belongsTo: {model: 'Estado', name: 'estado'}
        });
        
        Ext.onReady(function() {
            // 1
            var cidade = new Cidade({id: 2});
            
            cidade.getEstado(function(estado) {
                console.log(estado.get('nome'));
            });
    
            // 2
            Cidade.load(1, {
                success: function(cidade){
                    cidade.getEstado(function(estado) {
                        console.log(estado.get('nome'))
                    });
                }
            });
        });
        </script>
    </head>
    <body>
    </body>
    </html>
    cidade.json
    Code:
    {
        "rows": [
            {
                "id": "1",
                "nome": "Curitiba",
                "id_estado": "1"
            },
            {
                "id": "2",
                "nome": "São Paulo",
                "id_estado": "2"
            },
            {
                "id": "3",
                "nome": "Florianópolis",
                "id_estado": "3"
            },
            {
                "id": "4",
                "nome": "Maringá",
                "id_estado": "1"
            },
            {
                "id": "5",
                "nome": "Blumenau",
                "id_estado": "3"
            },
            {
                "id": "6",
                "nome": "Londrina",
                "id_estado": "1"
            }
        ]
    }
    estado.json
    Code:
    {
        "rows": [
            {
                "id": "1",
                "nome": "Paraná"
            },
            {
                "id": "2",
                "nome": "São Paulo"
            },
            {
                "id": "3",
                "nome": "Santa Catarina"
            }
        ]
    }
    Thank's!

  2. you modified the JSON too?

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    rename 'id_estado' to 'estado_id'

    it could be that the modelname must before the id, like modelname_id. else I do not know how they set associations.

  4. #3
    Sencha User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Location
    Curitiba - PR / Brasil
    Posts
    305
    Vote Rating
    5
    Answers
    16
    fabio.policeno is on a distinguished road

      0  

    Default


    Still returning incorrect: 'Paraná'.
    Code:
    Ext.define('Estado', {
            extend: 'Ext.data.Model',
            fields: ['id', 'nome'],
            proxy: {
                type: 'ajax',
                url: 'estado.json',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            },
            hasMany: {model: 'Cidade', name: 'cidades'}
        });
    
        Ext.define('Cidade', {
            extend: 'Ext.data.Model',
            fields: ['id', 'nome', 'estado_id'],
            proxy: {
                type: 'ajax',
                url: 'cidade.json',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            },
            belongsTo: {model: 'Estado', name: 'estado'}
        });
        
        Ext.onReady(function() {
            // 1
            var cidade = new Cidade({id: 2});
            
            cidade.getEstado(function(estado) {
                console.log(estado.get('nome'));
            });
    
            // 2
            Cidade.load(2, {
                success: function(cidade){
                    cidade.getEstado(function(estado) {
                        console.log(estado.get('nome'))
                    });
                }
            });
        });
    Thank's

  5. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    you modified the JSON too?

  6. #5
    Sencha User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Location
    Curitiba - PR / Brasil
    Posts
    305
    Vote Rating
    5
    Answers
    16
    fabio.policeno is on a distinguished road

      0  

    Default


    In fact, now I understand, the problem was actually in foreignKey, but found that I can define what the fk name. Following is the final code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Example</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext-all-debug.js"></script>
        <script type="text/javascript">
    
        Ext.define('Estado', {
            extend: 'Ext.data.Model',
            fields: ['id', 'nome'],
            proxy: {
                type: 'ajax',
                url: 'select.php?action=estados',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            },
            hasMany: 'Cidade'
        });
    
        Ext.define('Cidade', {
            extend: 'Ext.data.Model',
            fields: ['id', 'nome', 'id_estado'],
            proxy: {
                type: 'ajax',
                url: 'select.php?action=cidades',
                reader: {
                    type: 'json',
                    root: 'rows'
                }
            },
            belongsTo: {model: 'Estado', foreignKey: 'id_estado'}
        });
        
        Ext.onReady(function() {
            Cidade.load(5, {
                success: function(cidade) {
                    console.log("Cidade: " + cidade.get('nome'));
                    cidade.getEstado(function(estado){
                        console.log(estado.get('nome'))
                    });
                }
            });
        });
        </script>
    </head>
    <body>
    </body>
    </html>
    Done now with database to see if it really funconava, and it worked

    Ps: I marked the wrong answer as solved

    Thank you!

  7. #6
    Sencha User fabio.policeno's Avatar
    Join Date
    Sep 2010
    Location
    Curitiba - PR / Brasil
    Posts
    305
    Vote Rating
    5
    Answers
    16
    fabio.policeno is on a distinguished road

      0  

    Default


    Now came a question, the data is already related, but how to display it in the grid?
    Code:
    Ext.onReady(function() {
            /*Cidade.load(5, {
                success: function(cidade) {
                    console.log("Cidade: " + cidade.get('nome'));
                    cidade.getEstado(function(estado){
                        console.log(estado.get('nome'))
                    });
                }
            });*/
    
            var storeCidade = Ext.create('Ext.data.Store', {
                model   : 'Cidade',
                autoLoad: true
            });
            
            Ext.create('Ext.grid.Panel', {
                title   : 'Cidades',
                store   : storeCidade,
                renderTo: Ext.getBody(),
                columns : [{ 
                    header     : 'Name',  
                    dataIndex: 'nome', 
                    flex     : 1 
                },{ 
                    header     : 'Estado', 
                    dataIndex: 'id_estado', 
                    flex     : 1,
                    renderer : function(valor, estilo, model){
                        model.getEstado(function(estado){
                            return estado.get('nome');
                        });
                    }
                }]
            });
        });

Thread Participants: 1