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

时间:2015-01-30 14:02:37

标签: javascript forms extjs sencha-touch-2 store

我想建立一个从数据库加载问题的调查。问题的数量各不相同,因此我正在动态构建表单。我以为使用store.each并且里面的form.add会起作用,但是即使数据被加载,store.data.length也会返回0。

console.log(store)返回:

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('q:',question.data.all.length);并返回:

number of q: 0

我不知道为什么返回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();
}
});

知道发生了什么吗?更好的方法吗?

1 个答案:

答案 0 :(得分:1)

我认为问题是您需要在商店加载处理程序中使用form.add()代码。代码现在在哪里,你不能保证商店已经加载了。通过使用store load事件,这会在商店加载完新记录后触发,而传递给事件的一个参数就是记录集本身,所以你可以循环遍历这些记录。