hình ảnh hiển thị trong lưới bằng extjs

Question

Tôi mới sử dụng extjs. Tôi muốn hiển thị hình ảnh biểu tượng cho từng phần tử lưới. bạn có thể giúp tôi với ai không?

Tôi đang nhận đường dẫn hình ảnh từ tệp xml.

Mã của tôi ở bên dưới. ở đây tôi đang hiển thị đường dẫn hình ảnh.

Tôi phải thay thế bằng cách hiển thị hình ảnh.

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

thử sử dụng thuộc tính "hiển thị" trên khai báo cột mà bạn muốn hiển thị hình ảnh. Sử dụng thuộc tính Render, bạn có thể xuất HTML theo lựa chọn của mình. Kiểm tra nó trên diễn đàn ExtJs :) Hy vọng rằng chỉ cho bạn đi đúng hướng

Answer 2

bạn có thể viết tệp xml là htmlspecialchars ("") sau đó bạn có thể xem nó đơn giản.

Answer 3

Bạn cần phải thêm trình kết xuất vào các cột mà bạn muốn hiển thị hình ảnh. Giá trị trình kết xuất là hàm để gọi để hiển thị thẻ hình ảnh.

Một trong những yếu tố cột bạn chỉnh sửa:

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

Một chức năng mẫu renderer:

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

Trong ví dụ này, giá trị của dataIndex phải đường dẫn đầy đủ của hình ảnh. Nếu không thì bạn phải thêm một số logic bổ sung.

Answer 4

Một cách khác có thể được áp dụng cho câu hỏi cụ thể của bạn sẽ được thiết lập những hình ảnh trong file CSS như:

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

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

Sau đó tạo một render để thêm vào các siêu dữ liệu di động như nó được hiển thị:

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

để hiển thị biểu tượng cho cột tên đầu tiên bạn làm sau thay đổi

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

m chức năng ake như

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

Answer 6

Simple

Trong Json mình vượt qua chuỗi với < img src = " " />

sau dataIndex:

fields:[ 

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

] 

{ 

text: 'images', 

dataIndex: 'images' 

} 

Answer 7

Đây là chế độ tốt hơn, áp dụng một cột widget và hình ảnh phụ tùng loại như sau:

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

trên extjs 6