Görüntüyü extjs kullanarak bir ızgarada göster

Question

Ekstralar için yeni. Her ızgara elemanı için simge görüntüleri görüntülemek istiyorum. Lütfen bana yardım edebilir misiniz?

Görüntü yolunu bir xml dosyasından alıyorum.

Kodum aşağıda. Burada görüntü yolunu görüntülüyorum.

Görüntüyü görüntüleyerek değiştirmem gerekiyor. Eğer görüntüyü göstermek istiyorum sütun beyanında "işlemek" özelliğini kullanarak çalışıyor

Ext.onReady(function(){ 

     var store = new Ext.data.Store({ 
     url: 'new_frm.xml', 

       reader: new Ext.data.XmlReader({ 
       record: 'message', 
       fields: [{name: 'first'},{name: 'last'},{name: 'company'},{name: 'email'},{name: 'gender'},{name: 'form-file'},{name: 'state'},{name: 'Live'},{name: 'content'}] 
      }) 
    }); 

     var grid = new Ext.grid.GridPanel({ 
     store: store, 
     columns: [ 
      {header: "First Name", width: 120, dataIndex: 'first', sortable: true}, 
      {header: "Last Name", width: 180, dataIndex: 'last', sortable: true}, 
      {header: "Company", width: 115, dataIndex: 'company', sortable: true},   
      {header: "Email", width: 100, dataIndex: 'email', sortable: true}, 
      {header: "Gender", width: 100, dataIndex: 'gender', sortable: true}, 
      {header: "Photo", width: 100, dataIndex: 'form-file', sortable: true}, 
      {header: "State", width: 100, dataIndex: 'state', sortable: true}, 
      {header: "Living with", width: 100, dataIndex: 'Live', sortable: true}, 
      {header: "Commands", width: 100, dataIndex: 'content', sortable: true} 

     ], 
     renderTo:'example-grid', 
     height:200 
    }); 

    store.load(); 
}); 

Answer 1

. Render kullanma çıktı seçtiğiniz HTML can bağlıyor. ExtJs forumlarında bunu kontrol edin :) Umarım doğru yönde

Answer 2

'u işaret ederek umarım xml dosyasını htmlspecialchars ("") şeklinde yazabilirsiniz.

Answer 3

Görüntülemek istediğiniz sütunlarınıza bir renderer eklemeniz gerekir. İşleyici değeri, görüntü etiketini oluşturmak için çağırılacak işlevdir. değiştirilmiş sütun elemanları

Bir:

{header: "Photo", width: 100, renderer:renderIcon, dataIndex: 'form-file', sortable: true}, 

bir örnek oluşturucu işlevi: Bu örnekte

function renderIcon(val) { 
    return '<img src="' + val + '">'; 
} 

, dataIndex değeri, görüntünün tüm yol olmalıdır. Eğer değilse, ek bir mantık eklemelisiniz.

Answer 4

belirli soruya adapte edilebilir diğer alternatif kurulum için olacak gibi CSS dosyasındaki görüntüleri: Sonra

.icon-red { 
    background-image: url('red.png'); 
    background-repeat: no-repeat; 
} 

.icon-green { 
    background-image: url('green.png'); 
    background-repeat: no-repeat; 
} 

çevriliyor gibi bir hücre meta veriler eklemek hale oluşturun:

aşağıdakileri yapın adın sütun için simgeyi görüntülemek için

renderIcon: function(value, metadata, record, rowIndex, colIndex, store) { 

    // set the icon for the cells metadata tags 
    if (value > 0) { 
     metadata.css = metadata.css + ' icon-green '; 
    } else { 
     metadata.css = metadata.css + ' icon-red '; 
    } 

    // add an individual qtip/tooltip over the icon with the real value 
    metadata.attr = 'ext:qtip="' + (value) + '"'; 

    return ' '; 
} 

Answer 5

{header: "First Name", width: 120, renderer:first, dataIndex: 'first', sortable: true}, 

m değiştirir Onun Json olarak

function first(val) 
{ 
return '<img src="' + val + '">'; 
} 

Answer 6

Basit

dataIndex sonra < img src = " " />

ile dize geçerken AKE fonksiyonu:

fields:[ 

{name: 'images', type: 'string'} 

] 

{ 

text: 'images', 

dataIndex: 'images' 

} 

Answer 7

Bu daha iyi modudur, bir widget sütun ve widget görüntü geçerlidir şu şekilde yazın:

columns:[ 
     {text:'Image', xtype:'widgetcolumn', widget:{xtype:'image', src: 'http://www.sencha.com/img/20110215-feat-html5.png'}, dataIndex:'image'}] 

extjs 6