sencha extjs remove approach and use .sync() is not calling API

Question

I started studying Sencha ExtJS, and I created an app using Sencha ExtJS.

but i encounter an issue where if a tried to delete a record the remove and.sync() is not calling my API

Here is my code.

Store:

  Ext.define('MovieRentalApp.store.MovieRecord.MovieRecordStore', {
    extend: 'Ext.data.Store',
    alias: 'store.movieRecordStore',
    model: 'MovieRentalApp.model.MovieRecord.MovieRecordModel',

    autoSync: false, // Disable autoSync

    proxy: {
        type: 'rest',
        url: 'https://localhost:7060/api/MovieList/MovieList', 
        api: {
            create: 'https://localhost:7060/api/MovieList/MovieList', 
            read: 'https://localhost:7060/api/MovieList/MovieList', 
            update: 'https://localhost:7060/api/MovieList/MovieList', 
            destroy: 'https://localhost:7060/api/MovieList/MovieList'
        },
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    }
});

Controller:

// Controller
Ext.define('MovieRentalApp.controller.MovieRecord.MovieRecordController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.MovieRecordController',

    init: function () {
        var movieRecordsStore = this.getViewModel().getStore('movieRecords');
        movieRecordsStore.load(); // Manually load the store
    },

    onBeforeStoreLoad: function (store, operation) {
        var availabilityStatus = this.getViewModel().get('availability');
        operation.setParams({
            availability: availabilityStatus
        });
    },

    onDeleteButtonClick: function (button) {
            var movieRecordList = button.up('movieRecordList');
            var movieRecordStore = movieRecordList.getStore();
        
            var selectedRecords = movieRecordList.getSelectionModel().getSelection();
        debugger
            if (selectedRecords.length > 0) {
                var selectedRecord = selectedRecords[0];
        
                // Remove the selected record data from the store
                movieRecordStore.remove(selectedRecord);
        
                // Sync the store to trigger the DELETE request
                movieRecordStore.sync({
                    success: function () {
                        Ext.Msg.alert('Success', 'Movie record deleted successfully');
                        // Reload the store after successful deletion
                        movieRecordStore.load();
                    },
                    failure: function () {
                        Ext.Msg.alert('Error', 'Failed to delete movie record');
                        // Reload the store to revert the remove operation
                        movieRecordStore.load();
                    }
                });
            } else {
                Ext.Msg.alert('Error', 'No movie record selected');
            }
        }
        
});  

Model:

 Ext.define('MovieRentalApp.model.MovieRecord.MovieRecordModel', {
    extend: 'MovieRentalApp.model.Base',

    fields: [
        { name: 'movieId', type: 'int' },
        { name: 'title', type: 'string' },
        { name: 'releaseYear', type: 'int' },
        { name: 'director', type: 'string' },
        { name: 'genre', type: 'string' },
        { name: 'durationMinutes', type: 'int' },
        { name: 'rating', type: 'string' },
        { name: 'plotSummary', type: 'string' },
        { name: 'price', type: 'float' },
        { name: 'availabilityStatus', type: 'string' },
        { name: 'totalCount', type: 'int' }
    ]
});

viewModel:

    Ext.define('MovieRentalApp.viewModel.MovieRecord.MovieRecordViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.movieRecordViewModel',

    stores: {
        movieRecords: {
            type: 'movieRecordStore',
            listeners: {
                beforeload: 'onBeforeStoreLoad'
            }
        }
    },

    formulas: {
        availabilityStatus: function (get) {
            var store = get('movieRecords');
            if (store) {
                var count = store.getCount();
                return count > 0 ? 'Available' : 'Unavailable';
            }
            return 'Unknown';
        }
    },

    data: {
        availability: 'Available'
    },

    // Define the onBeforeStoreLoad method
    onBeforeStoreLoad: function (store, operation) {
        var availabilityStatus = this.get('availability');
        operation.setParams({
            availability: availabilityStatus
        });
    }
});

View:

Ext.define('MovieRentalApp.view.main.MovieRecord.MovieRecordView', {
    extend: 'Ext.grid.Panel',
    xtype: 'movieRecordList',
    controller: 'MovieRecordController',
    viewModel: {
        type: 'movieRecordViewModel'
    },

    requires: [
        'MovieRentalApp.store.MovieRecord.MovieRecordStore'
        // Add other required classes here if needed
    ],

    title: 'Movie List',

    bind: {
        store: '{movieRecords}' // Bind the store to the view model property
    },

    selModel: {
        selType: 'checkboxmodel',
        mode: 'SIMPLE'
    },

    columns: [
        { text: 'Movie ID', dataIndex: 'movieId', flex: 1 },
        { text: 'Title', dataIndex: 'title', flex: 1 },
        { text: 'Release Year', dataIndex: 'releaseYear', flex: 1 },
        { text: 'Director', dataIndex: 'director', flex: 1 },
        { text: 'Genre', dataIndex: 'genre', flex: 1 },
        { text: 'Duration (minutes)', dataIndex: 'durationMinutes', flex: 1 },
        { text: 'Rating', dataIndex: 'rating', flex: 1 },
        { text: 'Plot Summary', dataIndex: 'plotSummary', flex: 1 },
        { text: 'Price', dataIndex: 'price', flex: 1 },
        { text: 'Availability Status', dataIndex: 'availabilityStatus', flex: 1 },
        { text: 'Total Stock', dataIndex: 'totalCount', flex: 1 },
        {
            width: 150,
            sortable: false,
            menuDisabled: true,
            text: 'Actions',
            xtype: 'actioncolumn',
            items: [
                {
                    text: 'Delete',
                    iconCls: 'x-fa fa-trash',
                    handler: 'onDeleteButtonClick'
                },
                {
                    text: 'Edit',
                    iconCls: 'x-fa fa-pencil-square',
                    handler: function (grid, rowIndex, colIndex) {
                        // Handle edit action
                    }
                }
            ]
        }
    ],
    // Add the actions column to the grid
    tbar: ['->', 'Search', '->', 'Add'],
    bbar: {
        xtype: 'pagingtoolbar',
        displayInfo: true,
        displayMsg: 'Displaying movies {0} - {1} of {2}',
        emptyMsg: 'No movies to display',
        items: ['-', 'Delete Selected']
    }
});

my problem is this one:

 movieRecordStore.sync({
                    success: function () {
                        Ext.Msg.alert('Success', 'Movie record deleted successfully');
                        // Reload the store after successful deletion
                        movieRecordStore.load();
                    },
                    failure: function () {
                        Ext.Msg.alert('Error', 'Failed to delete movie record');
                        // Reload the store to revert the remove operation
                        movieRecordStore.load();
                    }
                });

The controller, movieRecordStore.sync(), is not calling my API.

Here is my API endpoint sample.

https://localhost:7060/api/MovieList/MovieList?movieID=9

a big appreciation if anyone can help me.

Thank you