Ext JS 6.2.0 How to clone existing rows and append the grid

Question

I'm creating a clone function in our system. So far, I can copy the selected rows and add to the store, but the cloned data is not displaying in the grid. The number of records is incrementing, but the displayed data is not. Here are the snippets of the code I've done so far:

{
                    text:'Clone',
                    id: 'dynamicGrammarCloneBtn',
                    disabled: true,

                    listeners: {
                        click: function(panel) {
                            Ext.Msg.confirm('Clone Data', 
                            'Are you sure you want to clone the selected data?',
                            function(button){
                                if(button == 'yes'){
                                    let selectedRecords = Ext.getCmp('dynamicGrammarGrid').getSelection();
                                    if(selectedRecords.length > 0){
                                        view.getController().addActions("cloneRow",selectedRecords);
                                        view.getController().editPageToolBarInfo();
                                    }
                                    else{
                                        Ext.Msg.alert('Warning', 'Please select atleast one row to clone.');
                                    }
                                }
                            });
                        }
                    },

                },

Then a switch case if the Clone button is clicked

case 'cloneRow': {

            Ext.getCmp('dynamicGrammarSaveBtn').setDisabled(false);

            var cloneGrammar  = Ext.data.StoreManager.lookup('insertedDynamicGrammarStore');
            
            result.forEach(function(item) {
                var originalRecord = item.data;
                var clonedRecord = Ext.apply({}, originalRecord);
                cloneGrammar.add(clonedRecord);
            });
            
            cloneGrammar.load();
            Ext.getCmp('dynamicGrammarGrid').getView().refresh();

            console.log(cloneGrammar.getData().items)
            Ext.getCmp('is_adding_row').setValue(Number(Ext.getCmp('is_adding_row').getValue()) - 1);
            

            ActionstoresTemp.addNewAction(result, "cloneRow");
              
            break;
        }

Then, this is the editPageToolbarInfo

editPageToolBarInfo: function()
{

    console.log(Ext.getCmp('dynamicGrammarGrid').getStore().getTotalCount());
    var start = 1;
    var limit = Ext.getCmp('dynamicGrammarGrid').getStore().getPageSize();
    var page = Ext.getCmp('dynamicGrammarGrid').getStore().currentPage;
    var initTotal = Ext.getCmp('dynamicGrammarGrid').getStore().getTotalCount();

    var addedRows  = Ext.data.StoreManager.lookup('insertedDynamicGrammarStore').data.items.length;
    var deletedRows = Ext.data.StoreManager.lookup('deletedDynamicGrammarStore').data.items.length;
    console.log("Added rows: ", addedRows);

    var startingPage = (((limit * page)  - limit) + start);

    console.log("limit " + limit +  " page" + page + " initTotal" + initTotal + " start" + start);
    if(initTotal < 1)
    {
        Ext.getCmp('dynamicGrammarDisplayMsg').setHtml('No records to display');

    }
    else {

        var total = initTotal + (addedRows - deletedRows);
        console.log("limit " + limit +  " page" + page + " initTotal" + initTotal + " start" + start);
        var inBetweenPage = 0;
        if((limit * page) > total){
            inBetweenPage = total;
        }
        else{
            inBetweenPage = (limit * page);
        }

        Ext.getCmp('dynamicGrammarDisplayMsg').setHtml('Displaying records ' + startingPage + ' - ' + inBetweenPage + ' of ' + total)

    }
},

I'm not sure what I'm missing because this is my first time working with this framework. Any help would be greatly appreciated..

Answer 1

I think the most common issue here is adding the record to the store with same id.

When we try to add a new record, and if store already has record with same id, then it simply updates its own copy, doesn't create a new record. You need to delete the id from the cloned record and then add it. Or you can pass null to the record.copy method to do same.

Check this Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3od1

Accept this as an answer if it helped you.