使用ExtJS在网格中显示图像

Question

我是ExtJS的新手。我想为每个网格元素显示图标图片。 有人能帮忙吗？

我从一个XML文件中获取图像路径。

以下是我的代码。在这里，我显示图像路径。

我必须将其替换为显示图像。

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

- Abisha

Answer 1

你需要为希望显示图像的列添加一个渲染器。渲染器值是要调用以呈现图像标签的函数。

你需要修改其中一个列元素：

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

一个示例渲染器函数：

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

在这个例子中，dataIndex的值必须是图像的完整路径。如果不是，则必须添加一些额外的逻辑。

- Shawn Swaner

Answer 2

另一个可针对您的问题采用的替代方案是在CSS文件中设置图像，例如：

```css background-image: url(图片链接); ```

请注意，这个链接应该指向您想要显示的图片的位置。

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

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

然后创建一个渲染器，将其添加到单元格元数据中进行渲染：

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 ' ';
}

- Ryan Dibble

Answer 3

尝试在你想要显示图像的列声明中使用"render"属性。使用Render属性，你可以输出自己选择的HTML代码。在ExtJs论坛上查看一下吧 :) 希望这能指引你朝着正确的方向前进。

- StevenMcD

Answer 4

这是更好的模式，应用小部件列和小部件图像类型，如下所示：

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

在ExtJS 6上。

- Arturo Morales Rangel

Answer 5

为了在你的名字列中显示图标，请进行以下更改

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

将函数定义为

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

- VSN

Answer 6

你可以将 XML 文件编写为 htmlspecialchars("")，然后就可以简单地查看它。

- Abisha

Answer 7

简单

在他的Json中传递带有< img src = " " />的字符串

在dataIndex之后：

fields:[

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

]

{

text: 'images',

dataIndex: 'images'

}

- Antonio Paulo