EXTJS 4 rellenado de formularios con lectura JSON

Question

Soy nuevo en EXTJS y estoy usando EXTJS-4.1 por ahora.Tengo un formulario básico, en el que necesito completar datos al cargar la página.La URL del servidor devolverá un JSON.

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

mi código de formulario es

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);
});

Pude completar el mismo JSON en una cuadrícula.¿Puedes ayudarme a pasar...?Obtuve muchos ejemplos en la red y lo intenté, pero aún así no tuve suerte.Lo anterior también es un fragmento de código modificado que obtuve mientras navegaba.

Answer 1

load() La función es asincrónica.Entonces hiciste lo correcto: crear un controlador para el evento de carga y poner la lógica allí.Sin embargo, cometiste un par de errores:

1. En el controlador de carga tendrá algunos parámetros para la función.El primer parámetro se almacenará, por lo que no es necesario utilizar una variable global.

2. No necesitas tener this.testForm.getForm().loadRecord(app.formStore); - porque no es un comando válido y en ese momento no tienes idea de si tu tienda está realmente cargada o no.Retírelo.Ya tienes loadRecords en el controlador de la tienda.

3. La representación de formularios y la carga automática de la tienda son dos eventos diferentes y usted no tiene control sobre su tiempo.Entonces recomendaría desactivar autoLoad para la tienda y llamar manualmente store.load() después de saber que el formulario está listo.

Answer 2

var form = Ext.getCmp('formJobSummary');console.log(form) probablemente devolverá undefined.Asigne un nombre al formulario y salga.O mejor aún ...

// 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

Pocas cosas para probar:

1) Si busca su archivo en localhost, no ponga localhost en URL solo escribe

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

¿Qué hace su archivo PHP?¿Podrías publicar el código?

3) Coloque la configuración de proxy en el modelo que no esté en la tienda.

4) ¿Intenta probar si la tienda ha leído los registros en la carga?con una consola.log?