Loading store data to build a form dynamically Sencha Touch2

Question

I want to build a survey loading the questions from a database. The number of questions varies, so I am building dynamically a form. I thought using store.each and a form.add inside will work, but store.data.length return 0 even the data is loaded.

console.log(store) returns:

Ext.apply.create.Class {[...]
    data: Ext.apply.create.Class
       [...]
       all: Array[3]
         raw: Object
           0:
             name: "textfield1"
             title: "label1"
             xtype: "textfield"
           1: [...]
           2: [...]
         [...]
       length: 3 [...]

So, the data is loaded. But the next line is console.log('number of q:',question.data.all.length); and returns:

number of q: 0

I don't know why is returning 0 records, and never run store.each. I attach all related files.

Model:

Ext.define("LabApp.model.Survey", {
extend : "Ext.data.Model",
config : {
    idProperty : 'id',
    fields : [
                { name : 'id', type : 'int' },
                { name : 'xtype', type : 'string' },
                { name : 'title', type : 'string'},
                { name : 'name', type : 'string'}
    ]
}
});

Store:

Ext.define('LabApp.store.Survey', {
extend : 'Ext.data.Store',
requires : "Ext.data.proxy.Ajax",
config : {
    model : 'LabApp.model.Survey',
    autoLoad : false,
    proxy : {
        type : 'ajax',
        url : '/LabApp/server/surveys.php',
        reader : {
            type : 'json',
            rootProperty : 'data'
        },
    },
    sorters : [ {
        property : 'id',
        direction : 'ASC'
    } ],

}
});

JSON:

 {
  success: true,
  data: [
         {xtype: 'textfield', title: 'label1', name: 'textfield1'},
         {xtype: 'textfield', title: 'label2', name: 'textfield2'},
         {xtype: 'textfield', title: 'label3', name: 'textfield3'}
        ]
 }

View:

Ext.define('LabApp.view.Survey', {
extend : 'Ext.form.Panel',
alias : 'widget.surveyView',

requires : [ 'Ext.form.FieldSet', 'Ext.Button' ],

config : {
    title : 'Survey',
    layout : {
        type : 'vbox',
    },

    items : [

    {
        xtype : 'fieldset',
        margin : '0 10 5 10',
        items : []
    } ]
}
});

Controller:

Ext.define('LabApp.controller.Survey', {
extend : 'Ext.app.Controller',

config : {
    refs : {
        mainView : 'mainView',
        surveyView : 'surveyView'
    }
},

launch : function() {
    var question = Ext.getStore('Survey');
    question.load();

    var form = this.getSurveyView();
    var fieldset = form.down('fieldset');
    console.log(question);
    console.log(question.getData());

    question.each(function(record, idx) {
        console.log(record.get('title'));
        form.add(record);
    });
    form.doLayout();
}
});

Any idea of what happening there? A better way to do this?

Answer 1

I think the problem is that you need to have your form.add() code within a store load handler. Where the code is right now, you cannot guarantee the store has loaded at that point. By using the store load event, this fires after the store has finished loading the new records and one of the params passed into the event is the set of records themselves, so you can just loop through these then.