2017-05-01 20 views
0

私は、サーバーへの接続の状態に応じてアイコンが必要なプロジェクトを開発しています。私は接続状態を確認するためにPing | Pongメソッドを使用しています。私は私のツールバーの内側(、 '高' '中'、 '低'、 'いいえ')は、このアイコンを配置するにはどうすればよいExt.js-値に基づいてツールバー内のアイコンを変更する

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

+0

、あなたのコードと問題の詳細を与えることができ、または:ここではそれがどのように動作するかの大まかなサンプルは明らかにあなたはアイコンやボタンのiconClsプロパティにテキストの結合を置換したい除いて、です単にフィドルを共有しますか? – abeyaz

+0

私はここにすべてを載せていないので、質問が広すぎない – Arnold

+0

あなたのコード構造が不明なので、このような質問に答えることはできません。少なくとも次のものを追加してください:あなたのコードの質問のどこにコードを入れるつもりですか?どのアイコンが変わるか。 Sencha Cmdを使用していますか?どのExtJSバージョン? – Alexander

答えて

0

ビューモデルで式を使用します。

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

「getClass」メソッドが同じクラスにないと思います。だから、あなたはグローバルイベントを発射し、 'ES.view.Layout.Toolbar.Toolbar'でそれを聞く必要があります。引数としてアイコンサイズを渡します。次に、スコープ内にあるので、画像上で参照を取得し、単純にsrcプロパティを 'setSrc'メソッドで変更することができます。

関連する問題