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!");
            }
        }
    });

Answer 2

我在继承的 BasicForm 类上使用 load 方法。

simpleForm.getForm().load({
   url: '/path/to/form/data',
   params: { id: id},
   method: 'POST',      
   waitMsg: 'Loading data...'
});

您的 JSON 应如下所示：

{ "成功": true, "数据": { "ProjectId": "foo", "ProjectName": "bar" } }