Question

我在“选择字段”中绑定了一个地方持有人。像这样：

{
xtype           : 'selectfield',
bind        : {
    store       : '{chapters}',
    placeHolder : '{chapterPlaceHolder}'
    }
}

现在我想更改＆quot; chapterPlaceHolder＆＃39;的数据。在来自商店监听器的ViewModel中：

Ext.define('SomeViewModel', {
extend      : 'Ext.app.ViewModel',

data        : {
    chapterPlaceHolder  : null
},
stores      : {
    chapters        : {
        model   : 'model.SiteChapter',
        listeners: {
            datachanged: function() { how to change the 'chapterPlaceHolder' in data? }
        }
    }
}
});

希望我很清楚......

Answer 1

您需要在viewmodel事件中获得datachanged。获得viewmodel后，您可以使用get或set更改视图模型中任何字段的值。

在 FIDDLE 中，我使用您的代码创建了一个演示，并将我的努力放在相同的代码中。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('SomeViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: "viewmodel.demoVM",
            data: {
                chapterPlaceHolder: null
            },
            stores: {
                chapters: {
                    listeners: {
                        datachanged: function () {
                            var vm = Ext.ComponentQuery.query('#myform')[0].getViewModel();
                            vm.set('chapterPlaceHolder', 'data changed event called......');
                            //how to change the 'chapterPlaceHolder' in data ?
                        }
                    }
                }
            }
        });
        Ext.create('Ext.form.Panel', {
            itemId: 'myform',
            fullscreen: true,
            viewModel: {
                type: 'demoVM'
            },
            defaults: {
                margin: 20
            },
            items: [{
                xtype: 'fieldset',
                items: [{
                    xtype: 'selectfield',
                    autoSelect: false,
                    bind: {
                        store: '{chapters}',
                        placeHolder: '{chapterPlaceHolder}'
                    }
                }]
            }, {
                xtype: 'button',
                text: 'Load Data In store ',
                handler: function (btn) {
                    var vm = btn.up('formpanel').getViewModel();
                    vm.get('chapters').loadData([{
                        text: 'First Option',
                        value: 'first'
                    }, {
                        text: 'Second Option',
                        value: 'second'
                    }, {
                        text: 'Third Option',
                        value: 'third'
                    }]);

                    //You can also set like below
                    //vm.set('chapterPlaceHolder', 'Data loaded on button click......');
                }
            }]
        });
    }
});

Answer 2

在查看控制器<上定义事件处理程序/ A>。视图控制器提供了一种方法， getViewModel < / a>，访问视图模型。应将控制器配置在与视图模型相同的类上。此示例假定这是select字段。

＆＃xA;＆＃xA;

  Ext.define（'Fiddle.app.ViewModel'，{＆＃xA; extend：'Ext.app .ViewModel'，＆＃xA; alias：'viewmodel.FiddleViewModel'，＆＃xA; data：{＆＃xA; chapterPlaceHolder：null＆＃xA;}，＆＃xA; stores：{＆＃xA; chapter：{＆ #xA;听众：{＆＃xA; datachanged：'dataChangedHandler'＆＃xA;}＆＃xA;}＆＃xA;}＆＃xA;}）;＆＃xA;＆＃xA; Ext.define（' Fiddle.app.ViewController'，{＆＃xA; extend：'Ext.app.ViewModel'，＆＃xA; alias：'viewmodel.FiddleViewController'，＆＃xA;＆＃xA; dataChangedHandler：function（store，eOpts） {＆＃xA; this.getViewModel.set（'chapterPlaceHolder'，...）;＆＃xA;}＆＃xA;}）;＆＃xA;＆＃xA; {＆＃xA; xtype：'selectfield'，＆＃xA; bind：{＆＃xA; store：'{chapters}'，＆＃xA; placeHolder：'{chapterPlaceHolder}'＆＃xA; }，＆＃XA; controller：'FiddleViewController'，＆＃xA; viewModel：{＆＃xA;类型：'FiddleViewModel'＆＃xA; }＆＃XA;}＆＃XA;

＆＃XA;

如何更改＆＃34;数据＆＃34;来自商店监听器的viewmodel中的值？

2 个答案: