ExtJs 6: How to bind data between two grids?

Question

I have 3 items in my main panel (Main.js):

Form (display data from selected row of Grid1)
Grid1 -Ext.grid.Panel (which get data from JSON file)
Grid2 -Ext.grid.Panel (should display some of the columns from selected row in Grid1)

All 3 views share same MainModel.js associated with Main.js.

I am able to bind Grid1 data to form using formula:

formulas: {
    someVal: {
        bind: '{employeeDetails.selection}',  //reference to grid1
        get: function(item){
            return item;
        }
    },

Form-

items:[
        {
            xtype: 'form',
            title: 'Form',
            defaultType: 'textfield',
            items: [
                {
                    xtype: 'displayfield',
                    fieldLabel: 'ID',
                    bind: '{someVal.id}'
                }, //...

But I cannot find any way to do the same between Grid1 and Grid2. I googled for hours. Only source for data for ExtJs grid seems to be store. Essentially is there any way to populate grid other than using store. Can we use bind inside columns or something? Thanks.

EDIT: updated formula for selection:

myStoreDataFormula: {
    bind:{
        bindTo:'{employeeDetails.selection}',
        deep:true
    },
    get: function(employee){
        if(employee!=null){
            var empArray = [];
            empArray.push(employee.data);
        return empArray;
        }
    }
}

Why do you need formula? If the components belong to same referenceHolder, you could use bind: '{employeeDetails.selection.id}' — Coderino Javarino

Coderino Javarino Coderino Javarino · Accepted Answer · 2019-01-08T19:31:26

A somewhat obscure feature when using a store defined inside a viewmodel, is that instead of defining concrete values, you can use the '{ ... }' mustache to bind to other viewmodel fields / formulas, or component configs that are published via their reference (personally I found this most useful for putting path variable's into url of the store's proxy).

Here is an example of grid bound to store, which in turn has it's data bound to a formula:

Ext.define('MyView', {
    viewModel: {
        stores: {
            myStore: {
                fields: ['name'],
                data: '{myStoreDataFormula}'
            }
        },
        formulas: {
            myStoreDataFormula: function(get) {
                return [{
                    name: 'Foo'
                }, {
                    name: 'Bar'
                }];
            }
        }
    },

    extend: 'Ext.grid.Panel',
    xtype: 'MyView',
    bind: {
        store: '{myStore}'
    },
    columns:[{
        dataIndex: 'name',
        flex: 1
    }]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create({
            xtype: 'MyView',
            width: 300,
            height: 300,
            renderTo: Ext.getBody()
        });
    }
});

Yes, this would still have you to have 2 stores, but you can make second grid's store to be fully dependent on the first grid's published selection config.

ExtJs 6: How to bind data between two grids?

1 Answers