我是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();
});
答案 0 :(得分:32)
您需要向要显示图像的列添加渲染器。渲染器值是调用渲染图像标记的函数。
修改了一个列元素:
{header: "Photo", width: 100, renderer:renderIcon, dataIndex: 'form-file', sortable: true},
示例渲染器功能:
function renderIcon(val) {
return '<img src="' + val + '">';
}
在此示例中,dataIndex的值必须是图像的完整路径。如果没有,那么你必须添加一些额外的逻辑。
答案 1 :(得分:4)
可以针对您的特定问题采用的另一种方法是在CSS文件中设置图像,如:
.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 ' ';
}
答案 2 :(得分:1)
尝试使用要在其中显示图像的列声明中的“render”属性。使用Render属性可以输出您选择的HTML。在ExtJs论坛上查看:)希望指出你正确的方向
答案 3 :(得分:1)
这是更好的模式,应用小部件列和小部件图像类型如下:
columns:[
{text:'Image', xtype:'widgetcolumn', widget:{xtype:'image', src: 'http://www.sencha.com/img/20110215-feat-html5.png'}, dataIndex:'image'}]
on extjs 6
答案 4 :(得分:0)
你可以把xml文件写成 htmlspecialchars(“”)然后你可以简单地查看它。
答案 5 :(得分:0)
用于显示您的名字列的图标,执行以下更改
{header: "First Name", width: 120, renderer:first, dataIndex: 'first', sortable: true},
使功能为
function first(val)
{
return '<img src="' + val + '">';
}
答案 6 :(得分:-1)
简单
在他的Json中传递带有< img src = " " />
在dataIndex:
之后fields:[
{name: 'images', type: 'string'}
]
{
text: 'images',
dataIndex: 'images'
}