Добавление эскизов изображений в строки сетки в ExtJS

Я пытаюсь добавить изображения в свою текущую сетку. Сейчас он отображает имена статей, и я хотел бы добавить уникальное эскиз над каждым именем статьи. Мой код в настоящее время полностью заменяет имя статьи и возвращает сломанное изображение.Добавление эскизов изображений в строки сетки в ExtJS

var grid = Ext.create('Ext.grid.Panel', { 
store: gridStore, 
id:'my_grid', 
stateful: true, 
listeners : { 
      'celldblclick' : function(iView, iCellEl, iColIdx, iStore, iRowEl,iRowIdx, iEvent) { 
        var textbody = gridStore.getAt(iRowIdx).data.id; 
        $('#articleBody').html(textbody); 
        $('#header').html('<strong> Uncategorized </strong>') 
      } 
}, 
columns: [ 
    { 
     text  : 'Article Name', 
     flex  : 1, 
     sortable : true, 
     dataIndex: 'company', 
     dataIndex:'image', 
     renderer : function(value, metadata, record, rowIndex,colIndex, store) 
     { 
      return "<img src='"+value+"' />"; 
     } 
    }, 
], 
height: 500,   
renderTo: 'gridPanel', 
viewConfig: { 
    stripeRows: true 
} 
});

Также возможно установить несколько атрибутов в DataIndex? Мне нужны как компания, так и имидж как индексы.

спасибо.

источник

2014-01-08 DavidMcHale92

Вы не можете использовать несколько dataIndexes, но можете просто расширить свой renderer(), чтобы добавить дополнительный HTML-код, чтобы отобразить как заголовок, так и изображение в любом стиле и конфигурации, которые вам нужны. Вы уже получаете record переданную визуализатора, так просто получить значение из свойства в записи, которую вы хотели:

renderer : function(value, metadata, record, rowIndex,colIndex, store) { 
    return record.get('company') + "<img src='"+value+"' />"; 
}

источник

2014-01-08 16:07:00 existdissolve

если я мой магазин данных определяется следующим образом: '[ [» '' ',' id ',' image '], [' company ',' id ',' image '], [' company ',' id ',' image '], [' company ',' id ',' image '], [' company ',' id ',' image '], [' company ',' id ',' image '], ]; ' С изображением, являющимся URL-адресом image Я хочу загрузить, как бы я сформулировал инструкцию return return? – DavidMcHale92

Я попробовал 'return record.get ('company') +" ";' , но он возвращает только идентификатор компании. – DavidMcHale92

Соответствуют ли ваши сопоставления хранилища возвращаемым данным? Похоже, что это за один индекс. – existdissolve

Ваш код, который устанавливает dataIndex дважды, просто приведет к тому, что dataIndex будет установлен на «образ», потому что второй заменит первый. Насколько я знаю, нет возможности отобразить в одном столбце несколько значений данных. Вероятно, вы должны просто разместить их в отдельных столбцах.

Причина, по которой ваше название статьи полностью отсутствует, потому что, как я объяснял выше, для dataIndex установлено значение «изображение». Что касается сломанного изображения, возможно, путь, который у вас есть, не работает. Вы должны убедиться, что это правильно.

источник

2014-01-08 15:59:54 forgivenson

Попробуйте это ...

{ 
    text  : 'Article Name', 
    flex  : 1, 
    sortable : true, 
    dataIndex: 'company', 
    renderer: function(value, metadata, record) { 
     return Ext.String.format('{0} <img height="20" width="20" src="{1}"></img>', value, record.data.image); 
    } 
},

Если dataIndex отличаются от «компании», то вы можете использовать следующий визуализатор

return Ext.String.format('{0} <img height="20" width="20" src="{1}"></img>', record.data.company, record.data.image);

источник

2014-01-09 09:40:22 scs

Добавление эскизов изображений в строки сетки в ExtJS

ответ

Смежные вопросы