Question

如何将控制器中所做的更改更新到视图？

查看

 Ext.define('SomeClassName',
 extends: 'Ext.container.Container',
 alias: 'widget.somewidget'
 /* other content here */

控制器

 requires: ['SomeClassName'],
 init: function(){
     var someVar = Ext.widget('somewidget');
     Ext.apply(someVar,{html: 'hello'});
 }

尽管如此，在上面的控制器中，我正在更改变量的html，视图没有变化。我在这里做错了吗？

如果无法做到，那该怎么做？

Answer 1

怎么样（doc）？

Ext.widget('somewidget', { html: 'hello' })

Answer 2

首先，如果您只想呈现自定义HTML，则不应使用Ext.container.Container。 Ext.Component就足够了。其次，您可以使用模板：

Ext.define('MyView', {
    extend: 'Ext.Component',
    alias: 'widget.myview',
    tpl: [
        '<div>Simon says: {command}</div>'
    ]
});

Ext.define('MyController', {
    extend: 'Ext.app.Controller',
    requires: ['MyView'],
    init: function() {
        var cmp = Ext.widget('myview');
        cmp.update({
            command: 'jump!'
        });
    }
});

注意，tpl不会在第一次呈现组件时应用，您必须为此调用update。要在初始化时呈现模板，请使用默认模板值设置data属性：

Ext.define('MyView', {
    extend: 'Ext.Component',
    alias: 'widget.myview',
    tpl: [
        '<div>Simon says: {command}</div>'
    ],
    data: {
        command: 'do nothing.'
    }
});

将控制器中所做的更改更新到视图

2 个答案: