2

フォーム パネル内のコンポーネントの値を設定しようとしていますが、以下は私のコードです。

グリッド付きフォーム パネル:

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 436,
    width: 754,
    layout: {
        columns: 4,
        type: 'table'
    },
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'displayfield',
                    colspan: 4,
                    fieldLabel: '',
                    value: 'Display Field'
                },
                {
                    xtype: 'displayfield',
                    colspan: 2,
                    margin: '0 50 0 0 ',
                    fieldLabel: 'Age',
                    labelAlign: 'top',
                    value: 'Display Field'
                },
                {
                    xtype: 'displayfield',
                    colspan: 2,
                    fieldLabel: 'Country',
                    labelAlign: 'top',
                    value: 'Display Field'
                },
                {
                    xtype: 'gridpanel',
                    colspan: 4,
                    header: false,
                    title: 'My Grid Panel',
                    store: 'MyJsonStore',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'DeptName',
                            text: 'Dept Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'DeptId',
                            text: 'Dept ID'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

モデル:

Ext.define('MyApp.model.EmpModel', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.DeptModel'
    ],

    fields: [
        {
            name: 'Name'
        },
        {
            name: 'Age'
        },
        {
            name: 'Country'
        },
        {
            name: 'Dept'
        }
    ],

    hasMany: {
        associationKey: 'Dept',
        model: 'MyApp.model.DeptModel'
    }
});

Ext.define('MyApp.model.DeptModel', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.EmpModel'
    ],

    fields: [
        {
            name: 'DeptName'
        },
        {
            name: 'DeptId'
        }
    ],

    belongsTo: {
        associationKey: 'Dept',
        model: 'MyApp.model.EmpModel'
    }
});

店：

Ext.define('MyApp.store.MyJsonStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.EmpModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'MyApp.model.EmpModel',
            storeId: 'MyJsonStore',
            data: {
                EmpDet: [
                    {
                        EmpName: 'Kart',
                        Age: '29',
                        Dept: [
                            {
                                DeptName: 'Dev',
                                DeptId: '1000'
                            }
                        ]
                    }
                ]
            },
            proxy: {
                type: 'ajax',
                url: 'data/empDet.json',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});

Json データ:

{
    "EmpDet": [
        {
            "EmpName": "Kart",
            "Age": "29",
            "Dept": [
                {
                    "DeptName": "Dev",
                    "DeptId": "1000"
                }
            ]
        }
    ]
}

質問:

1）コンポーネントの値を「表示フィールド」自体のままにしておきました。この値を削除すると、下のグリッドの幅が狭くなるためです。これは、テーブルのレイアウトと colspans によるものだと思います。値の読み込み時に配置を変更せずにラベルを表示する他の最良の方法はありますか?

2) 表示フィールドの値を設定しようとしています。私はイベントでそれをやろうとしましたafterrenderが、問題は、未定義のエラーが でスローされることExt.getStore('MyJsonStore').getAt(0)です。ボタンのクリックイベントで同じことを書くと、これはうまくいくことがわかりました。afterrenderなので、 displayfieldのイベントをやってみるとストアがロードされていないような気がします(ストアのautoloadをtrueに設定)。コンポーネントの afterrender イベントの代替手段はありますか。また、すべてのコンポーネントを1つずつ設定するのではなく、すべてのフィールド値を一気に設定する方法はありますか?

3) また、関連付けを適切に行うのが難しいと思います。Sencha Architect 2.2 を使用していますが、グリッドのデータ インデックスに移動すると、ドロップダウンで "DeptName" と "DeptId" を取得できません。

助けてください。

4

1 に答える 1

0

質問番号2については、以下の方法を提案したいと思います。うまくいくことを願っています。

私の解決策：

ストアが読み込まれるときに、表示フィールドの値を設定できます。したがって、次のように store の load イベントを使用できます。

yourStoe.on('load',function()
{
   //set display field values here
});
于 2013-06-12T10:51:12.410 に答える