ExtJS 6 - получить магазин внутри модели представления

Question

У меня есть приложение ExtJS 6.5.1, и я только начинаю переносить наше приложение из MVC в MVVM, так что я не очень разбираюсь в VM и VC.

У меня есть viewModel со встроенным хранилищем, например:

Ext.define("MYAPP.view.ViewportViewModel",{
     extend:"Ext.app.ViewModel",

     alias: 'viewmodel.viewport',

     constructor: function(config) {
        var me = this;

        this.callParent(arguments);

        me.setStores({
            info: {
                autoLoad:true,
                fields:["TEST"],
                proxy:{
                    type:"ajax",
                    url:"blah.html",
                    reader:{
                         type:"json"
                    }
                }
            }
        });
     }
});

Как внутри моего контроллера, как я могу "получить" магазин, чтобы я мог изменить URL, перезагрузить, передать extraParams и т. Д.?

Спасибо

Answer 1

Вы можете получить свой магазин, используя this.getViewModel().getStore('info') внутри ViewController .

После получения магазина вы можете установить другой URL, используя store.getProxy().setUrl(), загрузка с использованием store.load() и для отправки дополнительных параметров store.getProxy().extraParams.

Вот пример

//this one way
store.load({
    url: '{your url here}',
    params: {
        userid: 22216
    }
});

//this another way
store.getProxy().setUrl('{your url here}');
store.getProxy().extraParams = {
    userid: 22216
};

store.load();

В этом FIDDLE я создал демо-версию, используя модель представления и контроллер представления.Я надеюсь, что это поможет / поможет вам достичь ваших требований.

КОД SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyViewController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.myview',

            onRefreshButtonTap: function () {
                var info = this.getViewModel().getStore('info');

                info.getProxy().setUrl('data2.json');
                info.load();
            }
        });

        Ext.define("ViewportViewModel", {
            extend: "Ext.app.ViewModel",

            alias: 'viewmodel.myvm',

            constructor: function (config) {
                var me = this;

                this.callParent(arguments);

                me.setStores({
                    info: {
                        autoLoad: true,

                        fields: ['name', 'email', 'phone'],
                        proxy: {
                            type: 'ajax',

                            url: 'data1.json',

                            reader: {
                                type: 'json',
                                rootProperty: ''
                            }
                        }
                    }
                });
            }
        });

        //creating panel with GRID and FORM
        Ext.create({

            xtype: 'panel',

            controller: 'myview',

            title: 'Binding Example',

            renderTo: Ext.getBody(),

            viewModel: {
                type: 'myvm'
            },

            layout: 'vbox',

            items: [{
                xtype: 'grid',

                flex: 1,

                width: '100%',

                bind: '{info}',

                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone'
                }],

                listeners: {
                    itemclick: 'onGridItemClick'
                }
            }],

            tbar:[{
                text:'Refresh',
                handler:'onRefreshButtonTap'
            }]
        });
    }
});