Question

我想在ExtJS组合框中的文本前面添加图像。我在listConfig中有以下代码...

  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的项目前面的图像。

请帮忙

Answer 1

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

Answer 2

我知道这已经过时了，但是由于我最近遇到过类似的问题，我会发布我的解决方案，也许这对别人有帮助。

在这种情况下，您可以执行以下操作：

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

Answer 3

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

然后使用css类对你的图像做一些事情（比如隐藏或显示）

Answer 4

我使用的是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>'
    ]
}

Answer 5

到目前为止，没有一个答案对我有用，除了@riza，但是这并没有提供足够的逻辑来满足我对多个else if语句的需要。事实证明，其他人正在使用＆＃34;，＆＃34;而不是＆＃34; +＆＃34; （@riza除外）连接tpl的字符串。另外，@ MMZurita对HTML中的编码特殊字符有所了解。因此>变为>并且＆lt;变为<。 <div>和</div>需要位于实际tpl标记的开头和结尾！

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

如何将图像应用于extjs 4.0中的选定项目组合框

5 个答案: