使用 extjs 在网格中显示图像 [英] display image in a grid using extjs

问题描述

我是 extjs 的新手.我想为每个网格元素显示图标图像.你能帮帮我吗?

I am new to extjs. I want to display icon images for each grid elements. can you please help me anybody?

我从一个 xml 文件中获取图像路径.

I am getting the image path from an xml file.

我的代码如下.这里我显示的是图片路径.

My code is below. here I am displaying image path.

我必须通过显示图像来替换它.

I have to replace it by displaying image.

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

推荐答案

您需要向要显示图像的列添加渲染器.渲染器值是调用以渲染图像标签的函数.

You need to add a renderer to your columns that you want to display an image. The renderer value is the function to call to render the image tag.

修改了您的一个列元素:

One of your column elements modified:

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

示例渲染器函数:

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

在这个例子中，dataIndex 的值必须是图片的完整路径.如果没有，那么您必须添加一些额外的逻辑.

In this example, the value of the dataIndex must be the full path of the image. If not then you must add some additional logic.

这篇关于使用 extjs 在网格中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！