1

私はExtJSを学ぼうとしていますが、どこかで立ち往生しています。上がグリッド、下がフォームの画面を作りたいです。両方を相互にバインドして、グリッドから行を選択すると、フォーム フィールドにデータが入力され (グリッドに同じレコードが含まれる)、グリッドまたはフォームのいずれかで何かを変更すると、反対側が更新されます。

これまでのところ、グリッドとフォームを含むビューがあります。グリッドにデータを提供するストアがあります。私はここで立ち往生しています。フォームとグリッドの間で双方向バインディングを行う方法。私はグーグルを試してみて、こことここにいくつかのサンプルを見つけましたが、それらはすべて一方向バインディングです. つまり、グリッドで次のことを行うと:

           listeners: {

                selectionchange: function(model, records) {
                    var rec = records[0];
                    var form = Ext.getCmp('chartofaccountsForm');
                    form.loadRecord(rec);
                }
            }

現在選択されているレコードをフォームに入力するだけですが、フォーム内のレコードを更新してもグリッドは更新されません。

誰かが私を正しい方向に向けることによって私を助けることができますか? チュートリアル、またはブログ投稿は非常に役立ちます

4

1 に答える 1

5

この例を試してください：

Ext.widget('container',{
        width: 600,
        hight: 800,
        renderTo: Ext.getBody(),
        viewModel: {
            formulas: {
                selection: {
                    bind: '{g.selection}',
                    get: function(selection){
                        return selection;
                    }
                }
            }
        },
        items: [
            {
                xtype: 'grid',
                title: 'Grid',
                reference: 'g',
                store: {
                    type: 'store',
                    fields: ['id', 'name'],
                    data: [{id: 1, name: 'foo'}, {id: 2, name: 'bar'}]
                },
                columns: [
                    {dataIndex: 'id', header: 'ID'},
                    {dataIndex: 'name', header: 'Name'}
                ]
            },
            {
                xtype: 'form',
                title: 'Form',
                items: [
                    {
                        xtype: 'displayfield',
                        fieldLabel: 'ID',
                        bind: '{selection.id}'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: 'Name',
                        bind: '{selection.name}'
                    }
                ],
                bind: {
                    hidden: '{!selection}'
                }
            }
        ]

    });

https://fiddle.sencha.com/#fiddle/179d

于 2016-03-16T15:38:39.253 に答える