How to filter the data in a grid, by the parameter from another grid?

[Rendzi]

Hi.
I have 2 grids that receive data from two stores. The first grid contains information about the commodity transaction, and the second contains the list of goods for each operation. They are related to each other by the meaning of the operation code. It is required to implement an operation table filter based on the product code from the second table. Is it possible to do it somehow on the client, using the framework tools or only through server processing?

[petr.vecera]

Hi

Sure you can do something like this directly in the front-end.

First you need to get the operation code from the first grid (store). I guess there is lot of records so we should use grid instead of combo-box.

You can do this by using selection model on the grid http://examples.sencha.com/extjs/6.2...kbox-selection
Then you would using something as getSelection which will give you selected rows. You can also limit the selection only to one row or something.

When you have the selected row you will get he operation code in that row. And than simply apply the filter to the store in the second grid.

Check out the filter on the store http://docs.sencha.com/extjs/6.5.0/classic/Ext.data.Store.html#cfg-filters


In SA you can go to Modern Card list example where filtering of the store is implemented. (Project Inspector -> Filter Form ViewController -> onFilterChange function)
o-Wv8Y0TRRibH1KGEQH1_A.jpg


Let us know if you need to explain some part in more detail.

Regards
Petr

[Rendzi]

Petr, thanks for you answer.
Are there standard tools for such filtering, for example, as a filter on a column or is it realized only by adding a text field and a handler for it?

[petr.vecera]

If you are using Classic toolkit, there are already created tools.

Check this example http://examples.sencha.com/extjs/6.5...grid-filtering

Unfortunately Modern doesn't have this implemented yet.

Basically only thing you need to to do is:

plugins:'gridfilters',

Which enables the filtering in the grid.
And than add type of filter to the column :

    columns:[{        
dataIndex:'id',
        text:'Id',
        width:50,

        // Specify that this column has an associated Filter. This is
        // processed by the gridfilters plugin. If this is a string,
        // this is the type of filter to apply.
        filter:'number'
    },{
        dataIndex:'company',
        text:'Company',
        flex:1,

        // As an object, the type property indicates the type of filter to
        // apply. All other properties configure that filter instance.
        filter:{
            type:'string',
            itemDefaults:{
                emptyText:'Search for...'
            }
        }}

[Rendzi]

I meant tools similar to filters on the columns, but for such a request as I need)

[petr.vecera]

I see, nope I don't think there is anything out of the box. But implementing it shouldn't be really anything hard.

[Rendzi]

ok, thanks for your answers

[dnoizet]

Don't filter the grids, filter the data, as grids are bound to their data store, they will refresh each time the store data change.

When you select an operation on the first grid, you can get the selected record using the selectionChange or select event, so you have the selected operation code. Then get the store of the goods, set the operation code in the store.proxy.extraParams object and do a store.load. Done.