javascript - ExtJS 使用来自数据库 (JSON) 的数据填充 Ext.FormPanel

Question

我使用的是 ExtJS (v3)，我构建了一个表单，我想填充该表单，以便用户可以编辑数据，然后将其提交回来。

表单构建正确，数据从数据库中正确提取，但我遇到困难的地方是用数据库中的数据填充表单。

有人有建议吗？

这是我从数据库中提取的数据:

var workflow_projects = new Ext.data.JsonStore({
        autoLoad: true,
        autoDestroy: true,
        url: '<% $jsonURL %>',
        storeId: 'workflow_projects',
        idProperty: 'ProjectID',
        fields: [ 'ProjectID', 'ProjectName' ]
});

然后是我的表单:

var simpleForm = new Ext.FormPanel ({
labelWidth: 175,
id: 'simpleForm',
    url:'./edit',
method: 'POST',
    frame:true,
    title: 'Edit',
    bodyStyle:'padding:5px 5px 0',
    width: 850,
    defaultType: 'textfield',

    items: [
        {
            fieldLabel: 'Project Name',
            name: 'ProjectName',
            allowBlank:true,
            anchor:'100%'
        }

    ]
});

Answer 1

我会在商店的加载事件处理程序中使用加载记录。您的字段名称必须与商店中的记录相匹配，看起来您正在为 ProjectName 做这件事。

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.form.BasicForm-method-loadRecord

(代码未在实际浏览器中测试。)

var workflow_projects = new Ext.data.JsonStore({
            autoLoad: true,
            autoDestroy: true,
            url: '<% $jsonURL %>',
            storeId: 'workflow_projects',
            idProperty: 'ProjectID',
            fields: [ 'ProjectID', 'ProjectName' ],

        events : {
           load: function(store, records, options){
           if(records[0]){
           simpleForm.getForm().loadRecord(records[0]);
           } else{
             console.log("no data!");
            }
        }
    });