加载商店数据以动态构建表单 Sencha Touch2

Question

我想构建一个从数据库加载问题的调查。问题的数量各不相同，所以我正在动态构建一个表单。我以为在里面使用 store.each 和 form.add 会起作用，但是 store.data.length return 0 即使数据已加载。

console.log（商店）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 [...]

所以，数据加载完毕。但是下一行是console.log('number of q:',question.data.all.length);和 returns:

number of q: 0

我不知道为什么 return 有 0 条记录，而从来没有运行 store.each。我附上所有相关文件。

型号：

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

商店：

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'}
        ]
 }

查看：

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 : []
    } ]
}
});

控制器：

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

知道那里发生了什么吗？更好的方法吗？

Answer 1

我认为问题在于您需要在商店加载处理程序中包含 form.add() 代码。代码现在所在的位置，您无法保证此时商店已加载。通过使用商店加载事件，这会在商店加载完新记录后触发，并且传递给事件的参数之一是记录集本身，因此您可以循环遍历这些记录。

加载商店数据以动态构建表单 Sencha Touch2

Loading store data to build a form dynamically Sencha Touch2

javascript

forms

extjs

store

sencha-touch-2