4

我创建了一个脚本来动态生成表单，但在加载嵌套模型的数据时遇到问题。我已经尝试加载整个记录，并且我已经尝试加载每个子商店，但都不起作用。

我已经了解了如何使用 form.load()，但据我了解，这需要代理连接，并且还需要将 json 数据存储在“数据”数组中。

有人对我如何解决这个问题有任何建议吗？

    <div id="view-@pageSpecificVar" class="grid-container even"></div>
<div id="button"></div>
<script>

    Ext.define('HeaderForm', {
        extend: 'Ext.form.Panel',
        initComponent: function () {
            var me = this;
            Ext.applyIf(me, {
                id: Ext.id(),
                defaultType: 'textfield'
            });
            me.callParent(arguments);
        }
    });

    // Define our data model
    Ext.define('HeaderModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'HeaderSequence', type: 'int'}
        ],
        hasMany:[
            { name: 'Columns', model: 'ColumnModel' }
        ],
        proxy: {
            type: 'ajax',
            actionMethods: { create: 'POST', read: 'GET', update: 'POST', destroy: 'POST' },
            url: '@Url.Content("~/Test/Header")',
            timeout: 1200000,
        },
    });

    Ext.define('ColumnModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'ColumnWidth', type: 'float'}
        ],
        hasMany:[
            { name: 'Fields', model: 'FieldModel'}
        ],
        belongsTo: 'HeaderModel'
    });

    Ext.define('FieldModel', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'XType', type: 'string'},
            { name: 'FieldLabel', type: 'string'},
            { name: 'Name', type: 'string'},
            { name: 'Data', type: 'string'},
            { name: 'FieldSpecify', type: 'bool'}
        ],
        belongsTo: 'ColumnModel'
    });

    var store = Ext.create('Ext.data.Store', {
        storeId: 'HeaderStore',
        model: 'HeaderModel',
        autoDestroy: true,
        listeners: {
            load: function (result, records, successful, eOpts) {
                //console.log(result);
                var form = dynamicForm(records[0]);
                form.add(submitButton);
                form.render('view-@pageSpecificVar');
            }
        }
    });

    store.load();

    var dynamicForm = function(record) {

        var form = new HeaderForm();
        var columnContainer = new Ext.widget({
            xtype: 'container',
            layout: 'column'
        });
        var formItems = new Ext.util.MixedCollection();

        Ext.each(record.ColumnsStore.data.items, function(item) {

            Ext.iterate(item.data, function (key, value) {


                var fieldContainer = new Ext.widget({
                    xtype: 'container',
                    columnWidth: value
                });

                Ext.each(item.FieldsStore.data.items, function(item) {
                    if(item.data["FieldSpecify"]) {
                        fieldContainer.add(new Ext.widget({
                            xtype: item.data["XType"],
                            fieldLabel: item.data["FieldLabel"],
                            name: item.data["Name"],
                            //value: item.data["Name"]
                        }));
                    }
                }, this);

                columnContainer.add(fieldContainer);

            }, this);

        }, this);

        formItems.add(columnContainer);

        form.add(formItems.items);

        Ext.each(record.ColumnsStore.data.items, function(item) {
            Ext.each(item.FieldsStore.data.items, function(fields) {
                form.loadRecord(fields);
            });
        });

        //form.loadRecord(record);

        return form;
    };

    var submitButton = new Ext.widget({
        xtype: 'toolbar',
        dock: 'bottom',
        items:[{
            xtype: 'button',
            text: 'Save',
            handler: function(button) {
                var basic = button.up('form').form;
                basic.updateRecord(basic.getRecord());
                var store = Ext.StoreMgr.get('HeaderStore');
                store.each(function(record) {
                    record.dirty = true;
                });
                store.sync();
            }
        }]
    });

</script>

更新 对不起，我可能没有说得很清楚。我在将商店数据加载到表单字段时遇到问题。对于静态表单，我通常使用loadRecord将嵌套模型加载到表单中，但是在这种情况下，所有字段都嵌套在自己的小模型中，那么有没有办法使用 loadRecord 将每个嵌套模型值加载到自己的字段中？

HeaderModel 存储字段集信息。

ColumnModel 的目的是创建将围绕一组字段的容器，用于样式目的。它只是创建了两列字段。

FieldModel 存储字段特定的属性和数据。

这是响应 json 数据的示例...

{
"HeaderSequence":1,
    "Columns":[{
        "ColumnWidth":0.5,"Fields":[
            {"XType":"textfield","FieldLabel":"FieldA","Name":"NameA","Data":"A","FieldSpecify":true},
            {"XType":"textfield","FieldLabel":"FieldB","Name":"NameA","Data":"B","FieldSpecify":true}]
        },{
        "ColumnWidth":0.5,"Fields":[
            {"XType":"textfield","FieldLabel":"FieldA2","Name":"NameA2","Data":"A2","FieldSpecify":true},
            {"XType":"textfield","FieldLabel":"FieldB2","Name":"NameB2","Data":"B2","FieldSpecify":true}]
        }   
]

}

谢谢

4

2 回答 2

4

我已经弄清楚如何将嵌套模型加载到表单中。我们不能简单地使用 load 或 loadRecord，因为默认情况下，该方法会尝试获取模型的数据并遍历数据对象并调用 setValues。

我要做的是手动获取基本表单元素并自己调用 setValues 来分配值。

        // loop through each field store to load the data into the form by field id
        Ext.each(record.ColumnsStore.data.items, function(item) {
            Ext.each(item.FieldsStore.data.items, function(fields) {
                form.getForm().setValues([{ id: fields.data['Id'], value: fields.data['DisplayName'] }]);
            });
        });

为了跟进这一点，还需要放置一个自定义提交处理程序。它循环存储并在同步存储之前将提交的值设置为存储。

// define form submit button
    var submitButton = new Ext.widget({
        xtype: 'toolbar',
        dock: 'bottom',
        items:[{
            xtype: 'button',
            text: 'Save',
            handler: function(button) {
                // get basic form for button
                var basic = button.up('form').form;
                // get form submit values
                var formSubmitValues = basic.getValues();
                // get header store
                var store = Ext.StoreMgr.get('HeaderStore');
                // loop through each field store and update the data values by id from the form
                store.each(function(record) {
                    Ext.each(record.ColumnsStore.data.items, function(item) {
                        Ext.each(item.FieldsStore.data.items, function(fields) {
                            fields.data['Data'] = formSubmitValues[fields.data['Id']];
                        });
                    });
                    // mark the record as dirty to be sync
                    record.dirty = true;
                });
                // sync store object with the database
                store.sync();
            }
        }]
    });
于 2012-10-04T17:47:48.413 回答
3

看看这个和这个例子，了解如何将嵌套数据加载到嵌套模型中。您还将看到如何访问相关数据。

我不确定你为什么使用record.ColumnsStore.data.items，就好像记录是HeaderModel类型一样，你真的应该通过 获取列存储record.Columns，然后迭代该存储。

还有助于查看您的服务器返回的 JSON。

于 2012-10-04T11:12:57.523 回答