如何在盒子组件EXTJs 3.4中添加图像
Posted
技术标签:
【中文标题】如何在盒子组件EXTJs 3.4中添加图像【英文标题】：How to add image in box component EXTJs 3.4 【发布时间】：2018-05-07 23:27:06 【问题描述】：我想将图像添加到列表中。我正在使用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);
但我没有看到图标被渲染。
我错过了什么？
谢谢！
【问题讨论】：
【参考方案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 测试。
【讨论】：
【参考方案2】：背景图片 URL 解析不正确。
这是一个 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>
这是工作小提琴： https://fiddle.sencha.com/#view/editor&fiddle/2gdt
【讨论】：
以上是关于如何在盒子组件EXTJs 3.4中添加图像的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ExtJS 3.4 中添加/合并多个 Ext.data.JsonStore