Question

我有一个带有显示字段的表单。表单的值设置为超链接。现在我还需要一个图像与超链接一起出现。如何做到这一点？下面是我添加超链接的代码：

     xtype:'displayField',
     fieldLabel: 'Name',
     value: 'abc',
     renderer:function(value){
     return '<a href="#">'+value+'</a>'   //need to add an image with this
     }

Answer 1

我通常采用其中一种方法，大多数是等同的：

使用a和一些background-image向我的padding-left元素添加css类。
将锚元素包含在具有类似css类的div中。
在锚之前添加span。另外，使用display: inline-block并为其提供width和height，因为它没有文字内容。
你可以在img之前加上它，但由于某种原因，我从不这样做。如果图像没有加载，这很难看。

实施例： CSS

.myimgclass: { 
   background-image: url(...);
   background-position: 0;
   background-repeat: no-repeat;
 }
 span.myimgclass {
   width: 16px;
   height: 16px;
   display: inline-block;
 }

因此，在您的渲染器中，您可以执行以下操作：

内联锚点：

renderer:function(value){
 return '<a class="myimgclass" href="#">'+value+'</a>';
 }

附在div

renderer:function(value){
 return '<div class="myimgclass"><a href="#">'+value+'</a></div>';
 }

作为跨度前置：

renderer:function(value){
 return '<span class="myimgclass"></span><a href="#">'+value+'</a>';
 }

预先作为img：

renderer:function(value){
 return '<img src="../your/img/path/here.png." /><a href="#">'+value+'</a>';
 }

我还想补充一点，所有这些方法都是基于您希望通过渲染器将图像添加为html。另一种方法是设置组件的html:配置。如果您想要更新它，请使用ctrl.update('...');。 html内容应与上述示例相同，但value将不可用。因此renderer在初始化期间更适用于动态内容或通用，而html主要由代码（例如事件）控制。

渲染器在extjs中具有图像和超链接

1 个答案: