1. #1
    Sencha Premium Member sencha-dev2's Avatar
    Join Date
    Jun 2012
    Location
    France
    Posts
    59
    Answers
    2
    Vote Rating
    0
    sencha-dev2 is on a distinguished road

      0  

    Exclamation Answered: Store's behaving strangely

    Answered: Store's behaving strangely


    Hi, I have a widget that uses a gridpanel, combined to a form.

    I'm really sorry, but I hope it can be fixed quickly, cause it totally blocks me on my work and I can't go further...

    Here's a screenshot :

    screenAdresseWidget.jpg

    It has a trouble, cause I try to load in the form the data from the gridpanel's first item. When I do it, it throws an error saying that store's items are undefined. Then why does it display records on the grid ?

    When I click on the items, it works well, even if some fields are filled with 'nude' data. It is easy to correct.

    Here's the code of the component :

    Code:
    Ext.define('Infologis.view.Composants.FormulaireAdresse', {    extend: 'Ext.form.FieldSet',
        name: 'coordonneesPostales',
        title: '<img src="images/icons/AdressePostale.png" /> Coordonnees Postales',
        style: {backgroundColor: '#EFEFEF'},
        layout: 'vbox',
        alias: 'widget.formulaireAdresse',
        
        initComponent: function() {
            var me = this;
            
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'form',
                        name: 'coordPostales',
                        layout: 'vbox',
                        style: {
                            backgroundColor: '#EFEFEF'
                        },
                        width: 359,
                        items: [
                            {
                                xtype: 'toolbar',
                                width: 359,
                                name: 'toolAdresse',
                                items: [
                                    {
                                        xtype: 'container',
                                        flex: 1
                                    },
                                    {
                                        xtype: 'button',
                                        name: 'ajoutAdresseTiers',
                                        iconCls: 'x-btn-text-icon',
                                        icon: 'images/icons/application_add.png',
                                        text: 'Ajouter'
                                    },
                                    {
                                        xtype: 'button',
                                        name: 'enregistrerAdresseTiers',
                                        iconCls: 'x-btn-text-icon',
                                        icon: 'images/icons/tick.png',
                                        text: 'Valider',
                                        hidden: true
                                    },
                                    {
                                        xtype: 'button',
                                        name: 'annulerAjoutAdresseTiers',
                                        iconCls: 'x-btn-text-icon',
                                        icon: 'images/icons/cancel.png',
                                        text: 'Annuler',
                                        hidden: true
                                    }
                                ]
                            },
                            {
                                xtype: 'fieldcontainer',
                                name: 'adresseStructure',
                                layout: 'hbox',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        name: 'numeroVoie',
                                        emptyText: 'Num.',
                                        fieldLabel: 'Adresse ',
                                        enforceMaxLength: true,
                                        maxLength: "4",
                                        width: 156,
                                        labelWidth: 110,
                                        allowBlank: true
                                    },
                                    {
                                        xtype: 'combobox',
                                        name: 'idComplementNumeroRue',
                                        displayField: 'libelle',
                                        valueField: 'idComplementNumeroRue',
                                        queryMode:'local',
                                        store: 'ComplementNumeroRue',
                                        emptyText: 'Bis, Ter...',
                                        width: 36,
                                        allowBlank: true
                                    },
                                    {
                                        xtype: 'combobox',
                                        name: 'idTypeVoie',
                                        displayField: 'court',
                                        emptyText: 'Rue...',
                                        queryMode:'local',
                                        valueField: 'idTypeVoie',
                                        store: 'TypeVoie',
                                        width: 36,
                                        allowBlank: true
                                    },
                                    {
                                        xtype: 'textfield',
                                        name: 'nomVoie',
                                        emptyText: 'Nom de la voie',
                                        allowBlank: true,
                                        width: 122
                                    }
                                ]
                            },
                            {
                                xtype: 'fieldcontainer',
                                name: 'complementAdresseStructure',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        name: 'complementAdresse',
                                        fieldLabel: 'Complement ',
                                        emptyText: 'ZI, Lieu-dit...',
                                        allowBlank: true,
                                        labelWidth: 110,
                                        width: 359
                                    }
                                ]
                            },
                            {
                                xtype: 'fieldcontainer',
                                name: 'villeStructure',
                                layout: 'hbox',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        name: 'codePostal',
                                        maxLength: "5",
                                        enforceMaxLength: true,
                                        fieldLabel: 'Code Postal / Ville ',
                                        labelWidth: 110,
                                        width: 170,
                                        allowBlank: true,
                                        emptyText: 'Code Postal',
                                        enableKeyEvents: true,
                                        regex: /^\d{5}$/,
                                        regexText: 'Un code Postal est composé de 5 chiffres',
                                        listeners: {
                                            keyup: {
                                                fn: function(text) {
                                                    var val = text.getValue();
                                                    var len = val.length;
                                                    var cbo = text.up().down('combobox');
                                                    var store = cbo.store;
                                                    if(len > 3) {
                                                        store.filterBy(function(rec) {
                                                            var enr = rec.data.codePostal;
                                                            if(val.substring(0, len) == enr.substring(0, len))
                                                                return true;
                                                            else
                                                                return false;
                                                        });
                                                    }
                                                }
                                            }
                                        }
                                    },
                                    {
                                        xtype: 'combobox',
                                        name: 'idCommune',
                                        queryMode: 'local',
                                        minChars: 2,
                                        displayField: 'nomCommune',
                                        valueField: 'idCommune',
                                        store: 'Commune',
                                        allowBlank: false,
                                        emptyText: 'Ville',
                                        width: 186,
                                        listeners: {
                                            select: {
                                                fn: function(cbo, rec) {
                                                    if(typeof(rec[0]) != 'undefined') rec = rec[0];
                                                    var codeP = rec.data.codePostal;
                                                    cbo.up().down('textfield[name="codePostal"]').setValue(codeP);
                                                }
                                            },
                                            focus: {
                                                fn: function(cbo) {
                                                    if(cbo.up().down('textfield').value.length > 3) cbo.expand();
                                                }
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                xtype: 'textfield',
                                name: 'cedexAdresse',
                                allowBlank: true,
                                labelWidth: 110,
                                width: 359,
                                fieldLabel: 'CEDEX ',
                                emptyText: 'Cedex + numero boite postale',
                                listeners: {
                                    blur: {
                                        fn: function(text) {
                                            if(text.value != '' && typeof(text.value) != 'undefined')
                                                text.setValue(text.value.toUpperCase());
                                        }
                                    }
                                }
                            },
                            {
                                xtype: 'textfield',
                                name: 'pointRemise',
                                allowBlank: true,
                                labelWidth: 110,
                                width: 359,
                                fieldLabel: 'Point de remise ',
                                emptyText: 'i.e. Appartement 25... '
                            },
                            {
                                xtype: 'textfield',
                                name: 'localisationConstruction',
                                allowBlank: true,
                                labelWidth: 110,
                                width: 359,
                                fieldLabel: 'Localisation de la construction ',
                                emptyText: 'i.e. Batiment C...'
                            },
                            {
                                xtype: 'datefield',
                                name: 'dateEffet',
                                fieldLabel: 'Date d\'effet ',
                                format: 'd/m/Y',
                                labelWidth: 110,
                                width: 359,
                                allowBlank: false
                            },
                            {
                                xtype: 'checkbox',
                                name: 'facturation',
                                inputValue: 'true',
                                uncheckedValue: 'false',
                                labelWidth: 110,
                                fieldLabel: 'Facturation',
                                labelSeparator: ''
                            },
                            {
                                xtype: 'gridpanel',
                                name: 'hiddengridATDate',
                                width: 359,
                                maxHeight: 300,
                                overflowY: 'auto',
                                store: Ext.create('Infologis.store.AdressesTiersParDate'),
                                columns: { 
                                    items: [
                                        {
                                            xtype: 'gridcolumn',
                                            dataIndex: 'nomCommune',
                                            text: 'Commune',
                                            flex: 2
                                        },
                                        {
                                            xtype: 'gridcolumn',
                                            dataIndex: 'codePostal',
                                            text: 'Code Postal'
                                        },
                                        {
                                            xtype: 'datecolumn',
                                            dataIndex: 'dateEffet',
                                            text: 'Date',
                                            format: 'd/m/Y'
                                        },
                                        {
                                            xtype: 'booleancolumn',
                                            dataIndex: 'facturation',
                                            text: 'Facturation',
                                            trueText: 'Oui',
                                            falseText: 'Non'
                                        }
                                    ],
                                    defaults: {
                                        flex: 1,
                                        sortable: false,
                                        hideable: false
                                    }
                                },
                                listeners: {
                                    afterrender: {
                                        fn: function(grid) {
                                            var store = grid.store;
                                            var tool = grid.up().down('toolbar');
                                            bouton = tool.child('button[name="supprimerAdresseTiers"]');
                                            if (bouton) tool.remove(bouton);
                                            if(store.count() > 1) {
                                                tool.add(
                                                    {
                                                        xtype: 'button',
                                                        name: 'supprimerAdresseTiers',
                                                        icon: 'images/icons/application_delete.png',
                                                        iconCls: 'x-btn-text-icon',
                                                        text: 'Supprimer'
                                                    }
                                                );
                                            }
                                        }
                                    },
                                    itemclick: {
                                        fn: function(grid, rec) {
                                            grid.up().up().getForm().setValues(rec.data);
                                        }
                                    }
                                }
                            },
                            {
                                xtype: 'hidden',
                                name: 'idAdresse'
                            },
                            {
                                xtype: 'hidden',
                                name: 'idTiersPourAdresse'
                            }
                        ]
                    }
                ]
            });
            
            me.callParent(arguments);
        }
    });
    Here's the code of its controller :

    Code:
    Ext.define('Infologis.controller.ControleAdresse', {    extend: 'Ext.app.Controller',
        
        // Les Vues contrôlées
        views: [
            'Composants.FormulaireAdresse'
        ],
        
        models: [
            'AdressesTiersParDate'
        ],
        
        stores: [
            'AdressesTiersParDate'
        ],
        
        init: function() {
            this.control({
                'button[name="ajoutAdresseTiers"]':
                {
                    click: this.preparerFormulaireAjout
                },
                
                'button[name="enregistrerAdresseTiers"]':
                {
                    click: this.enregistrerAdresseTiers
                },
                
                'button[name="annulerAjoutAdresseTiers"]':
                {
                    click: this.annulationAjout
                },
                
                'button[name="supprimerAdresseTiers"]':
                {
                    click: this.supprimerAdresseTiers
                }
            });
        },
        
        preparerFormulaireAjout: function(btn) {
            var tool = btn.up();
            btn.hide();
            bouton = tool.child('button[name="supprimerAdresseTiers"]');
            if(tool.isAncestor(bouton)) bouton.hide();
            tool.child('button[name="enregistrerAdresseTiers"]').show();
            tool.child('button[name="annulerAjoutAdresseTiers"]').show();
            var ctn = tool.up();
            console.log(ctn);
            ctn.child('fieldcontainer[name="adresseStructure"] textfield[name="numeroVoie"]').setValue('');
            ctn.child('fieldcontainer[name="adresseStructure"] textfield[name="numeroVoie"]').focus(10, true);
            ctn.child('fieldcontainer[name="adresseStructure"] textfield[name="nomVoie"]').setValue('');
            ctn.child('fieldcontainer[name="villeStructure"] textfield[name="codePostal"]').setValue('');
            ctn.child('fieldcontainer[name="complementAdresseStructure"] textfield[name="complementAdresse"]').setValue('');
            ctn.child('textfield[name="cedexAdresse"]').setValue('');
            ctn.child('textfield[name="localisationConstruction"]').setValue('');
            ctn.child('textfield[name="pointRemise"]').setValue('');
            ctn.child('datefield[name="dateEffet"]').setValue(new Date());
            ctn.child('fieldcontainer[name="adresseStructure"] combobox[name="idComplementNumeroRue"]').select('');
            ctn.child('fieldcontainer[name="adresseStructure"] combobox[name="idTypeVoie"]').select('');
            ctn.up().down('hidden[name="idAdresse"]').setValue(-1);
        },
        
        enregistrerAdresseTiers: function(btn) {
            var form = btn.up().up();
            var param = form.getForm().getValues();
            var grid = Ext.ComponentQuery.query('fieldset[discrim="adresseECIndividu"] gridpanel[name="hiddengridATDate"]')[0];
            var store = grid.store;
            if(param.idAdresse == -1)
            {
                // création
                Ext.Ajax.request({
                    url: 'adressetiers/ajouter-adresse-tiers',
                    params: param,
                    method: 'POST',
                    success: function() {
                        var tool = btn.up();
                        btn.hide();
                        
                        bouton = tool.child('button[name="supprimerAdresseTiers"]');
                        if(tool.isAncestor(bouton)) bouton.show();
                        
                        bouton = tool.child('button[name="annulerAjoutAdresseTiers"]');
                        if(tool.isAncestor(bouton)) bouton.hide();
                        
                        tool.child('button[name="ajoutAdresseTiers"]').show();
                        
                        store.load({params: param.idTiersPourAdresse});
                        var first = store.first();
                        var rec = first.data;
                        form.getForm().setValues(rec);
                        
                        grid.fireEvent('afterrender', grid);
                        
                        var cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idTypeVoie"]');
                        var valeur = '';
                        if(rec.idTypeVoie != 0) valeur = cbo.store.findRecord('idTypeVoie', rec.idTypeVoie);
                        cbo.select(valeur);
                        
                        cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idComplementNumeroRue"]');
                        if(rec.idComplementNumeroRue != 0) 
                        {
                            valeur = cbo.store.findRecord('idComplementNumeroRue', rec.idComplementNumeroRue);
                        } else {
                            valeur = '';
                        }
                        cbo.select(valeur);
                        
                        cbo = form.child('fieldcontainer[name="villeStructure"] combobox[name="idCommune"]');
                        if(rec.idCommune != 0) {
                            cbo.fireEvent('select', cbo, first);
                            cbo.up().down('textfield').fireEvent('keyup', cbo.up().down('textfield'));
                            valeur = cbo.store.findRecord('idCommune', rec.idCommune);
                        } else {
                            valeur = '';
                        }
                        cbo.select(valeur);
                    }
                });
            }
        },
        
        annulationAjout: function(btn) {
            var grid = Ext.ComponentQuery.query('fieldset[discrim="adresseECIndividu"] gridpanel[name="hiddengridATDate"]')[0];
            var store = grid.store;
            var first = store.first();
            var rec = store.first().data;
            console.log(rec);
            var tool = btn.up();
            btn.hide();
            bouton = tool.child('button[name="supprimerAdresseTiers"]');
            if(tool.isAncestor(bouton)) bouton.show();
            tool.child('button[name="enregistrerAdresseTiers"]').hide();
            tool.child('button[name="ajoutAdresseTiers"]').show();
            var form = tool.up();
            form.getForm().setValues(rec);
            var cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idTypeVoie"]');
            var valeur = '';
            if(rec.idTypeVoie != 0) valeur = cbo.store.findRecord('idTypeVoie', rec.idTypeVoie);
            cbo.select(valeur);
            cbo = form.child('fieldcontainer[name="adresseStructure"] combobox[name="idComplementNumeroRue"]');
            if(rec.idComplementNumeroRue != 0) 
            {
                valeur = cbo.store.findRecord('idComplementNumeroRue', rec.idComplementNumeroRue);
            } else {
                valeur = '';
            }
            cbo.select(valeur);
            cbo = form.child('fieldcontainer[name="villeStructure"] combobox[name="idCommune"]');
            if(rec.idCommune != 0) {
                cbo.fireEvent('select', cbo, first);
                cbo.up().down('textfield').fireEvent('keyup', cbo.up().down('textfield'));
                valeur = cbo.store.findRecord('idCommune', rec.idCommune);
            } else {
                valeur = '';
            }
            cbo.select(valeur);
        },
        
        supprimerAdresseTiers: function(btn) {
            // nothing here for now
        }
    });
    and here's the function I call from the entire view's controller when I try to do it :

    Code:
    loadEtatCivilOnglet: function()    {
            var parent= Ext.getCmp('treePrincipal').getSelectionModel().getSelection()[0];
            var idBenef= parent.getId().substring(9);
            var pan= Ext.widget('panelBeneficiaire');
            var centre= pan.child('form[name="centre"]');
            var sud = pan.child('container[name="sud"]');
            
            pan.name='EtatCivil';
            
            
            //Chargement des donn꦳
            Ext.Ajax.request({
                url: 'beneficiaire/get-e-c',
                timeout: 3000,
                method: 'POST',
                params:{
                    'idBenef': idBenef
                },
                success: function(xhr) {
                    var res=Ext.JSON.decode(xhr.responseText);
                    res = res[0];
                    pan.setTitle('<img src="images/icons/identite.png" /> Etat civil ' + res.nomIndividu + ' ' + res.prenom);
                    centre.add(
                        {
                            xtype: 'container',
                            items: [
                                {
                                    xtype: 'formulaireECIndividu'
                                },
                                {
                                    xtype: 'formulaireRIB'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            maxWidth: 50,
                            flex: 1
                        },
                        {
                            xtype: 'container',
                            layout: 'vbox',
                            items: [
                                {
                                    xtype: 'formulaireAdresse',
                                    discrim: 'adresseECIndividu'
                                },
                                {
                                    xtype: 'formulaireTel2',
                                    discrim: 'tableauTelephoneECIndividu'
                                },
                                {
                                    xtype: 'formulaireMail'
                                }
                            ]
                        }
                    );
                    var nord = pan.down('container[name="nord"]');
                    nord.add(
                        {
                            xtype: 'toolbar',
                            name: 'toolFicheBeneficiaire',
                            items: [
                                {
                                    xtype: 'container',
                                    flex: 1
                                },
                                {
                                    xtype: 'button',
                                    name: 'enregistrerEC',
                                    text: 'Enregistrer',
                                    iconCls: 'x-btn-text-icon',
                                    icon: 'images/icons/accept.png'
                                },
                                {
                                    xtype: 'button',
                                    name: 'annulerEC',
                                    text: 'Annuler',
                                    iconCls: 'x-btn-text-icon',
                                    icon: 'images/icons/cancel.png'
                                }
                            ]
                        }
                    );
                    centre.getForm().setValues(res);
                    var grid = Ext.ComponentQuery.query('fieldset[discrim="tableauTelephoneECIndividu"] gridpanel[name="coordTel"]')[0];
                    grid.store.discrim = "storeTelECIndividu";
                    grid.store.load({params: res.idTiersPourAdresse});
                    grid = Ext.ComponentQuery.query('fieldset[discrim="adresseECIndividu"] form[name="coordPostales"] gridpanel[name="hiddengridATDate"]')[0];
                    grid.store.load({params: res.idTiersPourAdresse});
                    var cbo = centre.child('container fieldset[name="formulaireECIndividu"] combobox[name="idCivilite"]');
                    cbo.select(cbo.store.findRecord('idCivilite', res.idCivilite));
                    cbo = centre.child('container fieldset[name="formulaireECIndividu"] combobox[name="idCommuneNaissance"]');
                    var rec = cbo.getStore().data.items[cbo.store.findExact('idCommune', res.idCommuneNaissance)];
                    cbo.select(rec);
                    cbo.fireEvent('select', cbo, rec);
                    
                    grid.store.discrim = 'storeHiddenATDate';
                    console.log(grid.getStore().items);
                    grid.fireEvent('itemclick', grid.child('gridview'), grid.getStore().items[0].data);
                    
                    res = centre.getValues();
                    storeCompEC.add(res);
                }
            });
            Ext.getCmp('centre').add(pan);
        }
    I hope I gave you all elements that'll help you understanding the problem.

    I saw that the reload method is not supported by what I'm pointing on. But the load one works well... And it is really a store.

    Please, help. Thanks in advance.

    -----------------

    PS: Please; forgive the mistakes, I'm French...
    Last edited by sencha-dev2; 24 Aug 2012 at 6:30 AM. Reason: apologies

  2. If I got to the code of interest...

    Code:
        store.load({params: param.idTiersPourAdresse});
        var first = store.first();
        var rec = first.data;
        form.getForm().setValues(rec);
    ... you did not wait for the store to load before trying to get the first record to load into the form. You would need to do that in a callback from the load call.

    Here's a link to the documentation on Store.load

  3. #2
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    679
    Answers
    18
    Vote Rating
    21
    carol.ext will become famous soon enough carol.ext will become famous soon enough

      0  

    Default


    If I got to the code of interest...

    Code:
        store.load({params: param.idTiersPourAdresse});
        var first = store.first();
        var rec = first.data;
        form.getForm().setValues(rec);
    ... you did not wait for the store to load before trying to get the first record to load into the form. You would need to do that in a callback from the load call.

    Here's a link to the documentation on Store.load

  4. #3
    Sencha Premium Member sencha-dev2's Avatar
    Join Date
    Jun 2012
    Location
    France
    Posts
    59
    Answers
    2
    Vote Rating
    0
    sencha-dev2 is on a distinguished road

      0  

    Default


    Thanks a lot, carol.ext !

    I thought it would stop the code until load would be done... Thanks again !

Thread Participants: 1

Tags for this Thread