如何將圖像應用到選定的項目組合框中的extjs 4.0

我想在ExtJS組合框中的文本前添加圖像。我在listConfig下面的代碼...如何將圖像應用到選定的項目組合框中的extjs 4.0

listConfig: { 
     getInnerTpl: function(displayField) { 
      var tpl = '<div>' +'my img path is here' + '{name}</div>'; 
      return tpl; 
     } 
    },

我的店就像是從服務器這個

Ext.define('state', { 
    extend: 'Ext.data.Model', 
    fields: [{ name: 'stateCode', type: 'int' }, { name: 'name', type: "string"}] 
});

我的JSON響應...

[{"stateCode":"0","name":"--Select--"},{"stateCode":"1","name":"ABC"},{"stateCode":"2","name":"XYZ"},{"stateCode":"3","name":"OPQ"},{"stateCode":"188587","name":"LMN"}]

這裏我得到的圖像在組合框中的所有項目的盈方，但我只想要stateCode 1項目的圖像infront。

請幫助

來源

2011-08-17 amol

listConfig: { 
     getInnerTpl: function(displayField) { 
      var tpl = new XTemplate(
       '<div>', 
       '<tpl if="stateCode > 0">', 
        '<img src='img/path/image.jpg' />', 
       '</tpl>', 
       '</div>' 
     ); 
      return tpl; 
     } 
}

來源

2011-08-17 12:06:36 JamesHalsall

感謝名單jaitsu的善意回覆，但我想顯示狀態也與圖像的名稱應該appeare僅供stateCode = 0 – amol 2011-08-17 12:18:34

var tpl = '<div><img src='img/path/image.jpg' class="state-{state}" />{name}</div>';

然後使用CSS clasess做一些與你的形象（如隱藏或顯示）

來源

2011-08-18 05:48:21 dbrin

我知道這是舊的，但因爲我以前遇到過類似的問題，就在最近，我會發布我的解決方案，也許這會對別人有所幫助。

在這種情況下，你可以做這樣的事情：

listConfig: { 
    getInnerTpl: function(displayField) { 
    var tpl = '<div>' +'{[values.stateCode == 0 ? "<img src=\'path/to/image.jpg\'" : ""]}' + '{name}</div>'; 
    return tpl; 
    } 
},

來源

2014-08-28 05:44:43 riza

我使用ExtJS的5，這是爲我工作：

listConfig: { 
    itemTpl: [ 
     '<tpl if="stateCode = 0"', // If you have to use '<' or '>' you have to encode it (&gt;) 
      '<img src="path/to/img.png" /> {name}', 
     '<tpl else>', 
      '{name}', 
     '</tpl>' 
    ] 
}

來源

2014-09-08 15:25:13 MMZurita

的答案都不到目前爲止都工作對於我來說，除了@riza之外，但是這並沒有爲我需要處理多個if語句提供足夠的邏輯。事實證明，其他人使用「，」而不是「+」（除了@riza）來連接tpl的字符串。此外，@MMZurita在HTML中對編碼特殊字符做了很好的說明。所以>變成>而<變成<。該<div>和</div>需要去在實際的第三方物流標籤的開頭和結尾！

listConfig: { 
     getInnerTpl: function() { 

      var tpl = 
       '<div>' + 
       '<tpl if="id == 1">' + 
        '<img src="resources/icons/one.png" align="left">&nbsp;&nbsp;{name}' + 
       '<tpl elseif="id == 2">' + 
        '<img src="resources/icons/two.png" align="left">&nbsp;&nbsp;{name}' + 
       '<tpl elseif="id &gt; 2">' + 
        '<img src="resources/icons/Custom.png" align="left">&nbsp;&nbsp;{name}' + 
       '<tpl else>' + 
        '<img src="resources/icons/Standard.png" align="left">&nbsp;&nbsp;{name}' + 
       '</tpl>' + 
       '</div>'; 
       //); 

      return tpl; 
     } 
    }

來源

2014-11-19 23:44:40 MacGyver

如何將圖像應用到選定的項目組合框中的extjs 4.0

回答

相關問題