我想将图像添加到列表中。我正在使用xtype: "box"
,因为在extjs 3.4中没有图像xtype
。
以下是代码:
{
xtype: 'box',
width: 16,
height: 16,
cls: 'icon',
listeners: {
scope: this
}
}
css:
.icon{
background-image: url(../img/remove-icon.png);
}
但是我没有看到图标被渲染。
我错过了什么?
谢谢!
答案 0 :(得分:1)
另一个解决方案(test.html):
<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext-3.4.0/resources/css/ext-all.css">
<script type="text/javascript" src="../ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-3.4.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create({
xtype: 'window',
title: 'Image',
width: 400,
height: 300,
layout: 'vbox',
items: [{
xtype: 'box',
width: 16,
height: 16,
autoEl: {
tag: 'img',
src: '../img/remove-icon.png'
}
}]
}).show();
});
</script>
<title>'TEST'</title>
</head>
<body></body>
</html>
注意: 使用ExtJS 3.4.0进行测试。
答案 1 :(得分:0)
背景图片网址无法正确解析。
以下是POC代码:
app.js
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'Box Image Demo Panel',
items: [{
xtype: 'box',
width: 170,
height: 170,
cls: 'icon',
listeners: {
scope: this
}
}]
});
});
的index.html
<style>
.icon {
background-image: url(http://www.hermosaprogramacion.com/wp-content/uploads/2016/01/floating-action-button-ejemplo.png);
}
</style>