Search code examples
extjsextjs6checked

How set checked items in Ext.selection.CheckboxModel after render?

I'm using Ext.selection.CheckboxModel in Ext.grid.Panel and whant checked some items after data was binding and component is redering. The part of component that works without errors but wrong is below:

    listeners: {
        afterRender: function (thisObj, eOpts) {
            var window = Ext.ComponentQuery.query('#' + 'requestOperator_kbkAccess-window')[0];
            if (window) {
                var row = window.accessGrid.getSelectionModel().getSelection()[0],
                    ppp = row.get('Ppp'),
                    codes = ppp.map(a => a.Code);

                Ext.defer(function () {
                    var selections = [];
                    codes.forEach(function (item, index) {
                        let i = thisObj.getStore().find('Code', item);
                        if (i !== -1) {
                            selections.push(store.getAt(i))
                        }
                    });

                    console.log(thisObj.getStore().data);

                    thisObj.getSelectionModel().select(selections);
                }, 100);
            }
        }
    }

This code receive string of codes like 022,077,009 from parent component and attempt set as checked this codes in Ext.selection.CheckboxModel. The wrong work of this code is that line let i = thisObj.getStore().find('Code', item); return -1 and in debug count of items in the thisObj.getStore().data is 0. But in console i see that console.log(thisObj.getStore().data); return expected result: enter image description here On viewready result is same.

I'm new in extJs and don't understand what i'm doing wrong in that simple functionality? Please, help. Thanks.

Solution

  • You need to do this function after store get loaded :(https://docs.sencha.com/extjs/7.0.0/classic/Ext.data.Store.html#event-load)

    You can do it like:

        listeners: {
        afterRender: function (thisObj, eOpts) {
            thisObj.getStore().on('load', function () {
                var window = Ext.ComponentQuery.query('#' + 'requestOperator_kbkAccess-window')[0];
                if (window) {
                    var row = window.accessGrid.getSelectionModel().getSelection()[0],
                        ppp = row.get('Ppp'),
                        codes = ppp.map(a => a.Code);

                    Ext.defer(function () {
                        var selections = [];
                        codes.forEach(function (item, index) {
                            let i = thisObj.getStore().find('Code', item);
                            if (i !== -1) {
                                selections.push(store.getAt(i))
                            }
                        });

                        console.log(thisObj.getStore().data);

                        thisObj.getSelectionModel().select(selections);
                    }, 100);
                }
            });
        }
    },