Question

我正在开发一个项目，根据与服务器的连接状态，我需要这个图标。我使用Ping | Pong方法检查连接状态。

getClass: function (countPing) {
    if (countPing == 1) {
        return 'high';
    } else if (countPing == 2) {
        return 'medium';
    } else if (countPing == 3) {
        return 'low';
     } else {
         return 'no';
      }
    }
 });

我的toobar结构https://pastebin.com/dzs86smZ

如何在我的工具栏中放置此图标（＆＃39;高＆＃39;，＆＃39;中＆＃39;，＆＃39;低＆＃39; no＆＃39; no＆＃39;）？

Answer 1

我猜'getClass'方法不在同一个类中。所以你需要触发Global事件并在'ES.view.Layout.Toolbar.Toolbar'中监听它。您将传递图标大小作为参数。然后，由于您将在范围内，您可以获得对图像的引用，只需使用'setSrc'方法更改其src属性。

Answer 2

在视图模型中使用公式。下面是一个如何工作的粗略示例，除了显然你想要将文本绑定替换为按钮上的icon或iconCls属性：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var tb = new Ext.toolbar.Toolbar({
            renderTo: document.body,
            viewModel: {
                data: {
                    status: 1
                },
                formulas: {
                    connectionStatus: function(get) {
                        var v = get('status');
                        switch (v) {
                            case 1: return 'foo';
                            case 2: return 'bar';
                            case 3: return 'baz';
                        }
                    }
                }
            },
            items: [{
                bind: {
                    text: '{connectionStatus}'
                }
            }]
        });

        setInterval(function() {
            var n = Ext.Number.randomInt(1, 3);
            tb.getViewModel().set('status', n);
        }, 500);
    }
});

Ext.js-根据值更改工具栏内的图标

2 个答案: