加载商店数据以动态构建表单 煎茶触摸2.

Loading store data to build a form dynamically Sencha Touch2

本文关键字:表单 触摸 构建 动态 数据 加载      更新时间:2023-09-26

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

控制台.log(商店)返回:

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

杰森:

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

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

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