как применить изображения к выбранному элементу выпадающего списка в extjs 4.0 - PullRequest
Новая
       26

как применить изображения к выбранному элементу выпадающего списка в extjs 4.0

1 голос
/ 17 августа 2011

Я хочу добавить изображения перед текстом в поле со списком 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.

Пожалуйста, помогите

Ответы [ 5 ]

2 голосов
/ 28 августа 2014

Я знаю, что это старая проблема, но, поскольку я недавно столкнулся с подобной проблемой, я опубликую свое решение, может быть, оно поможет другим.

В этом случае вы можете сделать что-то вроде этого: 

listConfig: {
  getInnerTpl: function(displayField) {
    var tpl = '<div>' +'{[values.stateCode == 0 ? "<img src=\'path/to/image.jpg\'" : ""]}' +   '{name}</div>';
    return tpl;
  }
},
2 голосов
/ 17 августа 2011 
listConfig: {
       getInnerTpl: function(displayField) {
          var tpl = new XTemplate(
              '<div>',
              '<tpl if="stateCode > 0">',
                  '<img src='img/path/image.jpg' />',
              '</tpl>',
              '</div>'
          );
          return tpl;
       }
}
0 голосов
/ 20 ноября 2014

Ни один из ответов до сих пор не работал для меня, кроме @riza, но это не обеспечивает достаточной логики для того, что мне нужно было сделать с множественными другими операторами if.Оказывается, что другие использовали «,» вместо «+» (кроме @riza) для объединения строк TPL.Кроме того, @MMZurita хорошо подходит для кодирования специальных символов в HTML.Таким образом, > становится &gt;, а <становится <code>&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;
        }
    }
0 голосов
/ 08 сентября 2014

Я использую 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>'
    ]
}
0 голосов
/ 18 августа 2011 
var tpl = '<div><img src='img/path/image.jpg' class="state-{state}" />{name}</div>';

затем использует css clasess, чтобы что-то сделать с вашим изображением (например, скрыть или показать)

...