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 の目的は、スタイリングの目的で、一連のフィールドを囲むコンテナーを作成することです。2 つの列のフィールドを作成するだけです。

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

ネストされたモデルをフォームにロードする方法を理解しました。デフォルトでは、このメソッドはモデルのデータを取得してデータオブジェクトを反復処理し、setValuesを呼び出そうとするため、単純にloadまたはloadRecordを使用することはできません。

私がしなければならないのは、基本的なフォーム要素を手動で取得し、自分で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

ネストされたデータをネストされたモデルにロードする方法については、 thisおよびthisの例を参照してください。また、関連データにアクセスする方法についても説明します。

を使用する理由がわかりません。record.ColumnsStore.data.itemsレコードがHeaderModel型であるかのように、実際には を介し​​て列ストアを取得し、record.Columnsそのストアを反復する必要があります。

また、サーバーが返す JSON を確認するのにも役立ちます。

于 2012-10-04T11:12:57.523 に答える