0

我尝试使用http://jsfiddle.net/WAZah/中的 actioncolumn 制作一个单选专栏

这是我在 actioncolum 中的项目

             items: [{              
                 icon:'',
                 //renderer: function (val, metadata, record) {
                 getClass: function(value,metadata,record){
                     //alert(record.get('check'));
                     var knowledge = record.get('check');
                     if (knowledge == 1 ){                                      
                        return 'radio-col-on';
                         //metadata.css = 'radio-col-on'
                     } else {  
                         return 'radio-col-off';
                         //metadata.css = 'radio-col-off'
                     }               
                 }  
             }]

和我的 CSS

.x-action-col-cell img.radio-col-on {
    background-image: url('http://compare-gap-insurance.co.uk/wp-content/uploads/2012/10/Vista_radio-button_general1.jpg') !important;   
}
.x-action-col-cell img.radio-col-off {
    background-image: url('http://www.uams.edu/safety/images/Radio-button.jpg') !important;   
}

我怎样才能使这项工作谢谢。

4

1 回答 1

2

您正在返回一个应用于图像的 css 类名称，但您没有图像（或者至少没有一个渲染得足够大以供查看的图像）。如果您添加一个图标图像，例如与您的单选按钮图像大小相同的透明间隔 gif，这应该可以工作。

我建议您可能想使用@Reimius 的建议。如果您使用常规列和渲染器，您实际上可以在单元格中创建一个真正的单选按钮。

无论如何，这里的代码似乎适用于您的示例：

items: [{              
    icon:'/url/path/to/a/transparent/spacer.gif',
    getClass: function(value,metadata,record){
        var knowledge = record.get('check');
        if (knowledge == 1 ){                                      
            return 'radio-col-on';
        } else {  
            return 'radio-col-off';
        }               
    }
}]

还有一个小提琴，可以更新您的示例以使用此技术与（公认的尺寸不正确）间隔 gif：http: //jsfiddle.net/cfarmerga/WAZah/3/

于 2013-07-17T18:12:39.600 回答