Question

Extjs grid列里怎么显示图片

想要在grid的列里显示一个图片，这个图片通过后台数据控制，当后台返回"1”时显示，返回"0"时不显示。这个要怎么实现呢？

Answer 1

Ext.onReady(function() {
 var cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
  header : '编号',
  dataIndex : 'id',
  sortable : true
 }, {
  header : '性别',
  dataIndex : 'sex',
  renderer : function(value) {
   if (value == 'male') {
    return "<span style='color:green;font-weight:bold;'>绿男</span><img src='user_male.gif' />";
   } else {
    return "<span style='color:red;font-weight:bold;'>红女</span><img src='user_female.gif' />";
   }
  },
  sortable : true
 }, {
  header : '名称',
  dataIndex : 'name',
  align : "center", 
  sortable : true  
 }]);
 var data = [['1', 'male', 'name1', 'descn1'],
   ['2', 'female', 'name2', 'descn2'],
   ['3', 'male', 'name3', 'descn3'],
   ['4', 'female', 'name4', 'descn4'],
   ['5', 'male', 'name5', 'descn5'],
   ['6', 'female', 'name6', 'descn6']];
 var ds = new Ext.data.Store({
  proxy : new Ext.data.MemoryProxy(data),
  reader : new Ext.data.ArrayReader({}, [
    {
     name : 'id'
    }, // {name: 'id', mapping: 1},
    {
     name : 'sex'
    }, {
     name : 'name'
    }, {
     name : 'descn'
    }])
 });
 ds.load();
 var grid = new Ext.grid.GridPanel({
  title : 'GridPanel',
  id:'view_grid',
  renderTo : 'grid',
  ds : ds,
  cm : cm,
  width : 400,
  autoHeight : true,
  autoWidth : true,
  enableColumnMove : false,
  autoSizeColumns : true, // 根据每一列内容的宽度自适应列的大小
  trackMouseOver : true, //鼠标移动时高亮显示
  frame : true,
  selModel : new Ext.grid.RowSelectionModel({
   singleSelect : true
  }),
  iconCls : 'icon-grid'
 });
});

 

 

如图所示，图片是绿色和红色的人，根据值，判断显示什么颜色的。你可以改成根据0或1显示或不显示图片。

Answer 2

<script type="text/javascript">
function showdesc(rcid)
{
　alert(rcid);
　 };
Ext.onReady(function(){
new Ext.grid.GridPanel({
border:true,
frame:true,
height:200,
width:300,
store:new Ext.data.SimpleStore({
fields:["CityID","CityName","business","desc"],
data:[["AH","安徽","安徽事业部"],["BJ","北京","北京事业部"],["XM","厦门","厦门事业部"]]}),
renderTo:'resultGrid',
columns:[{
header:'城市编号',
width:80,
dataIndex:'CityID',
sortable: true
},{
header:'城市名称',
width:80,
dataIndex:'CityName',
sortable: true
},{
header:'所属事业部',
width:80,
dataIndex:'business',
sortable: true
},{
header:'详情查看',
width:80,
dataIndex:'desc',
sortable: true,
renderer:function(value){
return String.format(
　　　　　　　　　'<input id="show" type=image src=./images/show.gif title="show" onclick="showdesc(\'aa\')"/>'
　　　　　　　　　　　　　　 );

}

}]})
})

</script>