EXTJS 4 formulaire de la population avec JSON lire

Question

Je suis nouveau sur EXTJS et je suis en utilisant EXTJS-4.1 pour l'instant.J'ai un formulaire de base, dont j'ai besoin pour remplir les données sur le chargement de la page.url du serveur sera de retour au format JSON.

[{"countryid":1,"countrycode":"US","countryname":"United States"}]

mon code du formulaire est

Ext.require([
    'Ext.form.*'
    //'Ext.layout.container.Column',
    //'Ext.tab.Panel'
    //'*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';

Ext.define('app.formStore', {
extend: 'Ext.data.Model',
fields: [
   {name: 'countryid'},
   {name: 'countrycode'},
   {name: 'countryname'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'app.formStore',
proxy: {
    type: 'ajax',
    url : 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
    reader:{ 
        type:'json'                     
    }
},
autoLoad:true,
    listeners: {
        load: function() {
            var form = Ext.getCmp('formJobSummary'); 
            form.loadRecord(myStore.data.first());
        }
    }
});


var testForm = Ext.create('Ext.form.Panel', {
                    width: 500,
                    renderTo: Ext.getBody(),
                    title: 'Country Form',
                    waitMsgTarget: true,
                    fieldDefaults: {
                        labelAlign: 'right',
                        labelWidth: 85,
                        msgTarget: 'side'
                    },
                    items: [{
                        xtype: 'fieldset',
                        items: [{
                                xtype:'textfield',
                                fieldLabel: 'ID',
                                name: 'countryid'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'CODE',
                                name: 'countrycode'
                            }, {
                                xtype:'textfield',
                                fieldLabel: 'COUNTRY',
                                name: 'countryname'
                        }]
                    }]

            });


    this.testForm.getForm().loadRecord(app.formStore);
});

J'ai été en mesure de remplir la même JSON d'une grille.Pouvez-vous s'il vous plaît aidez-moi par...J'ai eu beaucoup d'exemples sur net et essayé, mais toujours pas de chance.Les données ci-dessus est également une modification de l'extrait de code que j'ai obtenu lors de la navigation.

Answer 1

load() la fonction est asynchrone.Donc vous avez fait une bonne chose - la création d'un gestionnaire pour l'événement de chargement et de mettre de logique là-dedans.Cependant vous avez fait quelques erreurs:

1. Dans le gestionnaire de chargement, vous aurez quelques paramètres à la fonction.Premier paramètre sera en magasin, donc vous n'avez pas besoin d'utiliser de variable globale.

2. Vous n'avez pas besoin d'avoir this.testForm.getForm().loadRecord(app.formStore); - parce que ce n'est pas une commande valide et à ce moment vous n'avez aucune idée de savoir si votre magasin est chargé ou pas.Le supprimer.Vous avez déjà loadRecords dans le magasin de gestionnaire.

3. L'affichage du formulaire et de les stocker chargement automatique sont deux événements différents et vous n'avez pas de contrôle sur leur calendrier.Donc, je vous recommande de le désactiver autoLoad pour le magasin et manuellement à l'appel store.load() une fois que vous savez que le formulaire est prêt.

Answer 2

var form = Ext.getCmp('formJobSummary');console.log(form) sera probablement de retour undefined.Attribuez un nom à la forme et vous partez.Ou mieux encore...

// Ext.require([
// 'Ext.form.*'
//'Ext.layout.container.Column',
//'Ext.tab.Panel'
//'*'
// ]); // you dont need ext.require for ext integrated stuff

Ext.onReady(function () {
    Ext.QuickTips.init();

    //var bd = Ext.getBody(); 

    /*
     * ================  Simple form  =======================
     */
    //bd.createChild({
    //  tag: 'h2',
    //  html: 'Form 1 - Very Simple'
    //}); // over written by the form anyway

    // var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>'; // never used

    Ext.define('app.formStore', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'countryid'
        }, {
            name: 'countrycode'
        }, {
            name: 'countryname'
        }]
    });



    var testForm = Ext.create('Ext.form.Panel', {
        width: 500,
        renderTo: Ext.getBody(),
        name:'formJobSummary', //why your orignal bit wasn't working
        title: 'Country Form',
        waitMsgTarget: true,
        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 85,
            msgTarget: 'side'
        },
        items: [{
            xtype: 'fieldset',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'ID',
                name: 'countryid'
            }, {
                xtype: 'textfield',
                fieldLabel: 'CODE',
                name: 'countrycode'
            }, {
                xtype: 'textfield',
                fieldLabel: 'COUNTRY',
                name: 'countryname'
            }]
        }]

    });

    var myStore = Ext.create('Ext.data.Store', {
        model: 'app.formStore',
        proxy: {
            type: 'ajax',
            url: 'http://localhost/milestone_1/web/app_dev.php/md/country/show/1',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true,
        listeners: {
            load: function (store,record,e) {
                testForm.loadRecord(store.first());
            }
        }
    });


});

Answer 3

Peu de choses à essayer:

1) Si vous recherchez votre fichier sur localhost, ne mettez pas localhost sur l'URL Écris seulement

URL: '/mileStone_1/web/app_dev.php/md/country/show/1'

Quel est votre fichier php?Pourriez-vous poster le code?

3) Placez la configuration proxy sur le modèle non pas en magasin.

4) avez-vous essayer de tester si Store a lu des enregistrements sur charge?avec une console.log?