ExtJS 6 - 在viewmodel中获取商​​店

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来获取商店。

获得商店后，您可以使用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 中，我使用视图模型和视图控制器创建了一个演示。我希望这有助于/指导您实现您的要求。

CODE 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'
            }]
        });
    }
});