Extjs DataView实例

var tpl = new Ext.XTemplate(
    '<tpl for=".">'
    ,'<div class="thumb-wrap" id="{id}">'
    ,'<div class="x-panel-tl"><div class="x-panel-tr"><div class="x-panel-tc"><div class="x-panel-header x-unselectable" id="ext-gen146" style="-moz-user-select: none;"><span class="x-panel-header-text" id="ext-gen151"><a style="color:blue;cursor:pointer" href="javascript:;">{device_name}</a></span></div></div></div></div>'
    ,'<div class="tpl_cont">'
    ,"<table style='width:100%;padding:4px;' cellPadding=0 cellSpacing=1><tr><td class='td_grey'>设备型号</td><td class='td_grey'>{device_type_name}</td></tr><tr><td class='td_grey'>版本号</td><td class='td_grey'>{version_name}</td></tr><tr> <td class='td_grey'>连接状态</td> <td class='td_grey'><span class='green'>在线</span></td></tr><tr> <td class='td_grey'>用户数</td> <td class='td_grey'>[90/1000]</td></tr><tr> <td class='td_grey'>CPU使用率</td> <td class='td_grey'><span style='width:100px;display:inline-block;border:1px solid #8E8E8E;'><span style='width:18%;display:inline-block;margin:auto;background-color:#00BFFF;'><span style='margin-left:40px;'><b>18%</b></span></span></span></td></tr><tr> <td class='td_normal'>内存使用率</td> <td><span style='width:100px;display:inline-block;border:1px solid #8E8E8E;'><span style='width:25%;display:inline-block;margin:auto;background-color:#F78E1F;'><span style='margin-left:40px;'><b>25%</b></span></span></span></td></tr></table>"
    ,"</div></div>"
    ,'</tpl>'
    ,'<div class="x-clear"></div>'
 );
 
 var dataview=new Ext.DataView({
  id: 'images-view',
  store: store,
  tpl: tpl,
  width:width,
  autoHeight: true,
  multiSelect: true,
  overClass: 'x-view-over',
  itemSelector: 'div.thumb-wrap',
  emptyText: '没有数据', 
  listeners: {
   selectionchange: {
    fn: function (dv, nodes) {
     
    }
   }
  }  
 });
 
 var pn = new Ext.Panel({
  frame: true
  ,height:height
  ,items: [dataview]
  });

 

 

标题头获取其他字段数据

{header:'用户',dataIndex:'channel_id',renderer:function (v, metadata, record, rowIndex, columnIndex, store) {if(store.getAt(rowIndex).get('policy_type')<6) return 1;}}}