使用extjs在网格中显示图像

问题描述

我是新来的extjs。我想显示每个网格元素的图标图像。
你可以帮助我吗？

我从xml文件中获取图像路径。

我的代码在下面。这里我正在显示图像路径。

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

 code> 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：E邮件，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（）; 
}）; 
  

解决方案

您需要在列中添加一个渲染器，想要显示图像。渲染器值是调用渲染图像标签的函数。

修改了一个列元素：

  {header：Photo，width：100，renderer：renderIcon，dataIndex：'form-file'，sortable：true}，
  / pre> 
 
 
示例渲染器函数：
  function renderIcon ）{
 return'< img src ='+ val +'>'; 
} 
  
在这个例子中，dataIndex的值必须是图片。如果没有，那么你必须添加一些额外的逻辑。
 
I am new to extjs. I want to display icon images for each grid elements.can you please help me anybody?
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},
A sample renderer function:
function renderIcon(val) {
    return '<img src="' + val + '">';
}
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在网格中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！