如何在 ExtJS5 中使用 ViewModel 绑定将 addCls 添加到 Button

Question

绑定后我想改cssclass。在 ExtJS5 中可以吗？

我添加到评论中。 fiddle: https://fiddle.sencha.com/#fiddle/olc

Answer 1

你的代码有几个问题：

cls 无法绑定，因为没有 setCls 方法 - 您可以绑定 iconCls 如果你想要
您不能在 iconCls:'{rating}'[0] 等字符串后添加索引 - 这在语法上是不正确的
如果您定义 rating 公式，您必须运行获取函数 - get()

试试这个代码

Ext.define('Fiddle.view.FooModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.fiddle-foo',

    data: {
        val: 1
    },

    formulas: {
        rating: function(get) {
            get();
            return 'hello-world';
        }
    }
});

Ext.define('Fiddle.view.Foo', {
    extend: 'Ext.panel.Panel',
    xtype: 'fiddle-foo',

    viewModel: {
        type:'fiddle-foo'
    },

    layout: 'hbox',
    height: 50,
    width: 250,
    items: [{
        xtype: 'button',
        text: 'rating 1',
        bind:{
         iconCls:'{rating}'
        }
    }, {
        xtype: 'button',
        text: 'rating 2',
        bind:{
         iconCls:'{rating}'
        }
    }, {
        xtype: 'button',
        text: 'rating 3',
        bind:{
         iconCls:'{rating}'
        }
    }]


});

Ext.application({
    name: 'Fiddle',

    launch: function() {
        new Fiddle.view.Foo({
            renderTo: document.body,
            width: 400,
            height: 400,
            title: 'Test'
        });
    }
});

如何在 ExtJS5 中使用 ViewModel 绑定将 addCls 添加到 Button

How can addCls to Button with ViewModel binding in ExtJS5

javascript

extjs

mvvm

extjs5