我可以在ViewModel中定义一个函数,并在EXT JS

时间:2018-01-24 10:52:19

标签: extjs

当前场景是我在类中有数据操作函数,当我从控制器loadData函数中的REST服务获取数据时,我调用此函数。然后我更新了我的viewModel的商店。

现在我想知道他们是一种可以集中数据操作功能并将更新存储到视图模型的方式,并且从控制器调用viewmodel函数传递来自rest服务的数据。

1 个答案:

答案 0 :(得分:0)

是的,您可以在viewmodel内定义function并从controller致电。

FIDDLE 中,我使用视图模型和控制器创建了一个演示。我希望这可以帮助您或指导您实现您的要求。

代码段

Ext.application({
    name: 'MYDEMO',

    launch: function () {
        Ext.define('FormController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.formcntr',
            //this will fire on get data button tap
            onGetDataButtonTap: function (btn, e, eOpts) {
                this.getViewModel().doGetData();
            },
            //this will fire on set data button tap
            onSetDataButtonTap: function (btn, e, eOpts) {
                this.getViewModel().doSetData();
            }
        })

        Ext.define('MyViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.myViewModel',
            //For setting data inside of viewmodel or somthing diffrent  opetraion
            doSetData: function (data) {
                Ext.Msg.alert('Success', 'doSetData method of ViewModel, called from Controller/view');
                //set data from here
                //or you can put your logic here whatever you want
                //Depend on your requirement
            },

            //For getting data inside of viewmodel or somthing diffrent  opetraion
            doGetData: function () {
                Ext.Msg.alert('Success', 'doGetData method of ViewModel, called from Controller/view');
                //return data from here
                //or you can put your logic here whatever you want
                //Depend on your requirement
            }
        });

        Ext.create({
            xtype: 'panel',
            title: 'Users Profile',
            fullscreen: true,
            layout: 'vbox',
            controller: 'formcntr',
            viewModel: {
                type: 'myViewModel'
            },
            tbar: [{
                text: 'GET Data',
                handler: 'onGetDataButtonTap'
            }, {
                text: 'SET Data',
                handler: 'onSetDataButtonTap'
            }],
            renderTo: Ext.getBody()
        });
    }
});