Extjs “如何改变”；“数据”；来自存储侦听器的viewmodel中的值？

我在“selectfield”中绑定了一个占位符，如下所示：

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

现在我想从store listener更改ViewModel中“chapterPlaceHolder”的数据：

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? }
        }
    }
}
});

希望我说得很清楚…

你需要深入了解事件。获取

viewmodel

后，可以使用或更改视图模型内任何字段的值

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

代码片段

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

你需要进入事件的内部。获取

viewmodel

后，可以使用或更改视图模型内任何字段的值

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

代码片段

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

---

在上定义事件处理程序。视图控制器提供了访问视图模型的方法。控制器应配置在与视图模型相同的类上。本例假设这是选择字段

Ext.define('Fiddle.app.ViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.FiddleViewModel',
    data: {
        chapterPlaceHolder: null
    },
    stores : {
        chapters: {
            listeners: {
                datachanged: 'dataChangedHandler'
            }
        }
    }
});

Ext.define('Fiddle.app.ViewController', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.FiddleViewController',

    dataChangedHandler: function(store, eOpts) {
        this.getViewModel.set('chapterPlaceHolder', ...);
    }
});

{
    xtype: 'selectfield',
    bind: {
        store       : '{chapters}',
        placeHolder : '{chapterPlaceHolder}'
    },
    controller: 'FiddleViewController',
    viewModel: {
        type: 'FiddleViewModel'
    }
}

---

在上定义事件处理程序。视图控制器提供了访问视图模型的方法。控制器应配置在与视图模型相同的类上。本例假设这是选择字段

Ext.define('Fiddle.app.ViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.FiddleViewModel',
    data: {
        chapterPlaceHolder: null
    },
    stores : {
        chapters: {
            listeners: {
                datachanged: 'dataChangedHandler'
            }
        }
    }
});

Ext.define('Fiddle.app.ViewController', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.FiddleViewController',

    dataChangedHandler: function(store, eOpts) {
        this.getViewModel.set('chapterPlaceHolder', ...);
    }
});

{
    xtype: 'selectfield',
    bind: {
        store       : '{chapters}',
        placeHolder : '{chapterPlaceHolder}'
    },
    controller: 'FiddleViewController',
    viewModel: {
        type: 'FiddleViewModel'
    }
}

---

哪个Ext版本？它的6.0.1版本…哪个Ext版本？它的6.0.1版本…谢谢你的帮助。但是现在，在我添加了：viewModel:{type:'working schedule'}之后，视图不会加载我的存储对于我的面板…我很惊讶Ext没有用简单的方法来更改模型处理程序中的数据…这有什么替代方法？将函数放入控制器？如果你想加载存储，那么你需要为此放置代理和自动加载属性，或者用另一种方法，你可以在控制器内部和中创建视图的绘制事件该方法可以使用视图模型获取存储。到达商店后，您可以在这里装货。谢谢您的帮助。但是现在，在我添加了：viewModel:{type:'working schedule'}之后，视图不会加载我的存储对于我的面板…我很惊讶Ext没有用简单的方法来更改模型处理程序中的数据…这有什么替代方法？将函数放入控制器？如果你想加载存储，那么你需要为此放置代理和自动加载属性，或者用另一种方法，你可以在控制器内部和中创建视图的绘制事件该方法可以使用视图模型获取存储。到达商店后，您可以在这里装货。