ViewModel : how to define a store by using an existing class of store

Hi,

I have created a class of kind store :

Code:

Ext.define('Cwi.store.ProgramStore', {
    extend: 'Ext.data.Store',
    
    model: 'Cwi.model.Program',
    
    autoLoad: false,
    autoSync: true,
    remoteSort: true,
    sorters: [{
        property: 'number',
        direction: 'ASC'
    }],
    pageSize: pageSize,
    
    proxy: {
        type: 'ajax',
        url: 'decl/program/program.html',
        reader: {
            type: 'json',
            root: 'root',
            totalProperty: 'totalProperty'
        },
        extraParams: {
            jsAction: 'loadList',
            refresh: true
        }
    },
    
    listeners: {
        load: function(store, records, successful, eOpts) {
            delete store.getProxy().extraParams.refresh;
        }
    }
    
});

For the moment I use this in my view :

Code:

Ext.define("Cwi.view.decl.Program",{
    "extend": "Ext.panel.Panel",
    
    requires: [
        'Ext.toolbar.Paging',
        'Cwi.model.Base',
        'Cwi.model.Program',
        'Cwi.store.ProgramStore',
        'Cwi.view.decl.ProgramModel',
        'Cwi.view.decl.ProgramController',
        'Cwi.view.decl.AccountOnCopy',
        'Cwi.view.decl.AccountOnCopyController',
        'Cwi.view.decl.AccountOnCopyModel'
    ],
    
    "controller": "decl-program",
    "viewModel": {
        "type": "decl-program"
    },
    xtype: 'view-program',
    layout: 'card',
    
    initComponent: function() {
        
        var programStore = Ext.create('Cwi.store.ProgramStore', {
            autoDestroy: true,
            autoLoad: true
        });
        
        Ext.apply(this, {
            items: [{
                xtype: 'grid',
                reference: 'grid',
                
                bind: {
                    title: '{title}'
                },
                
                store: programStore,
                
                loadMask: true,
                
                columns: [
                    { text: Bundle.Number,  dataIndex: 'number', width: 100 },
                    { text: Bundle.Name, dataIndex: 'name', width: 350 },
                    { text: Bundle.PersonInCharge, dataIndex: 'personInCharge', width: 200 },
                    { text: Bundle.Organization, dataIndex: 'organization', width: 300 },
                    { text: Bundle.NbPlatforms, dataIndex: 'nbPlatforms', width: 150 }
                ],
                
                listeners: {
                    select: 'onSelectRecord'
                },
                
                tbar: [{
                    xtype: 'button',
                    enableToggle: true,
                    text: Bundle.OnCopy,
                    
                    listeners: {
                        toggle: 'onToggleOnCopyBt'
                    }
                }],
                
                bbar: Ext.create('Ext.PagingToolbar', {
                    store: programStore,
                    displayInfo: true
                })
                
            }]
        });
        
        this.callParent();
    }
});

I would like to put "programStore" in the ViewModel and use the binding because I think it is more MVVM approach.

Do I have reason to want to do that?

If yes how can I do that.

Thank you for your help

ViewModel : how to define a store by using an existing class of store