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应如下所示：

{“success”：true，“data”：{“ProjectId”：“foo”，“ProjectName”：“bar”}}

ExtJS使用来自数据库（JSON）的数据填充Ext.FormPanel

2 个答案: