1
votes

In my app I have a tree and a grid, both with remote stores (ajax proxy).

When I select record in my tree I have to add selected record id attribute value to grid store proxy extraParams and reload grid store.

Using ExtJS 4 I did all this explicitly in a controller. Is it possible to implement such logic using ExtJS 6 binding mechanics? If so, simple fiddle would be really helpful.

1
Currently no, you would need to bind to the change in that value then manually trigger the store to reload.Evan Trimboli
@evan-trimboli Okay, thanks!Sergey Novikov

1 Answers

2
votes

You can bind tree's row selection with proxy extra param. Anyway you need to trigger the store load explicitly. Here is an example without the viewcontroller instance:

Ext.define('MyApp.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.main',

    data: {
        selectedGroup: null
    },

    stores: {
        users: {
            model: 'User',
            fields: [
                'name', 'email', 'phone'
            ],
            proxy: {
                type: 'ajax',
                url: 'resources/users.json',
                reader: {
                    type: 'json',
                    rootProperty: 'users'
                },
                extraParams: {
                    myParam: '{selectedGroup.id}'
                }
            },
            updateProxy: function (proxy) {
                proxy.onAfter('extraparamschanged', this.load, this)
            }
        },
        groups: {
            type: 'tree',
            root: {
                expanded: true,
                children: [
                    {text: 'group1', leaf: true},
                    {
                        text: 'group2', expanded: true, children: [
                        {text: 'subgroup1', leaf: true},
                        {text: 'subgroup2', leaf: true}
                    ]
                    },
                    {text: 'group3', leaf: true}
                ]
            }
        }
    }
});


Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'MyApp.view.main.MainModel'
    ],

    viewModel: 'main',

    layout: 'hbox',

    items: [{
        xtype: 'treepanel',
        title: 'Groups Tree',
        bind: {
            selection: '{selectedGroup}',
            store: '{groups}'
        },
        flex: 1
    }, {
        xtype: 'grid',
        title: 'Users',
        bind: '{users}',
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }, {
            text: 'Company',
            dataIndex: 'company',
            flex: 1
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            flex: 1
        }],
        flex: 1
    }]
});