Extjs实现类似windows中资源管理器方式的图标文件清单

在Extjs中对文件或数据清单列表显示，最常见就是采用GRID方式来显示数据，笔者在使用中，发现可以采用图标方式显示文件清单（注：需要使用到插件Ext.ux.grid.ExplorerView这个插件）。以下是文件的现实界面，通过扩充功能，完全能达类似资源管理器的效果。

实际使用插件中发现，不能自动换行，只好自己定义CSS了

CSS代码：
.icon-grid {
            background-image:url(../shared/icons/fam/grid.png) !important;
        }

.thumb-wrap{
 float: left;
 margin: 4px;
 margin-right: 0;
 padding: 0px;
 width: 250px; height: 60px;
 border: 1px solid #EDEDED;
}
.x-view-over{
    border:1px solid #dddddd;
 background: #efefef url(../js/extjs/resources/images/default/grid/row-over.gif) repeat-x left top;
 padding: 0px;
}
.x-view-selected{
 background: #efefef url(../js/extjs/resources/images/default/grid/row-over.gif) repeat-x left top;
 border:1px solid #99bbe8;
 padding: 0px;
}
.x-vgrid3-cell-inner{
 overflow:hidden;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
    padding:3px 3px 3px 5px;
    white-space: nowrap;
}
.x-vgrid3-cell-inner{
width: 200px;
}
显示模板代码：
});
 var tpl=new Ext.XTemplate(
 '<tpl for=".">',
 '<div class="thumb-wrap {alt}" id="{fileid}">',
 '<table class="x-grid3-row-table"><tbody>',
 '<tr>',
 '<td class="x-grid3-col x-grid3-cell ux-explorerview-icon"><img src="images/{fileimg}" width="48" height="48"></td>',
 '<td ><div class="x-vgrid3-cell-inner" unselectable="on">{FileNum}<br>{FileRname}<br><span>{fileunit}<br>{filedate}<br></span></div></td>',
 '</tr>',
 '</tbody></table></div>',
 '</tpl>',
 '<div class="x-clear"></div>'
 );
 
 
为方便阅读者在图标列表和清单列表方式切换显示，采用DataView和GridPanel ，通过layout:'card'布局来实现
部分代码：
var Filedataview=new Ext.DataView(
 {
  name:'Filedataview',
  store:ds,
  tpl:tpl,
  loadMask:
  {
   msg:"数据加载中(Data 첨가)...."
  },
  singleSelect:true,
  selectedClass:"x-view-selected",
  overClass:'x-view-over',
  itemSelector:'div.thumb-wrap',
  autoDestroy:true,
  prepareData:function (data)
  {
   data.filesize=Ext.util.Format.fileSize(data.filesize);
   return data;
  },
  listeners:
  {
   'dblclick':function (t,n,node,e)
   {
    alert(n);
   }
  }
 });
 var FileViewgrid=new Ext.Panel(
 {
  animCollapse:false,
  frame:false,
  border:false,
  autoDestroy:true,
  items:[Filedataview]
 });
 var FileListgrid=new Ext.grid.GridPanel(
 {
  ds:ds,
  cm:cm,
  stripeRows:true,
  loadMask:
  {
   msg:"数据加载中(Data 첨가)...."
  },
  ViewConfig:
  {
   forceFit:true
  },
  autoScroll:true,
  frame:false,
  border:false,
  autoDestroy:true,
  animCollapse:false
 });
 var viewtabpanel=new Ext.Panel(
 {
  name:'viewtabpanel',
  enableTabScroll:true,
  layout:'card',
  activeItem:0,
  margins:'0 5 0 0',
  frame:false,
  border:false,
  autoDestroy:true,
  items:[FileViewgrid,FileListgrid]
 }
 );
 var viewpanel=new Ext.Panel(
 {
  margins:'0 5 0 0',
  layout:'fit',
  autoDestroy:true,
  frame:false,
  border:false,
  width:Ext.get("Filemanagerdiv").getWidth(),
  height:Ext.get("Filemanagerdiv").getHeight(),
  renderTo:'Filemanagerdiv',
  bbar:new Ext.PagingToolbar(
  {
   pageSize:limit,
   store:ds,
   displayInfo:true,
   emptyMsg:"没有登记文件",
   plugins:new Ext.ux.Andrie.pPageSize(),
   displayMsg:'显示第 {0} 条到 {1} 条文件，一共 {2} 个文件'
  }),
  tbar:new Ext.Toolbar(
  {
   autoDestroy:true,
   items:[
   {
    xtype:'tbseparator'
   },
   {
    xtype:'button',
    iconCls:'icon_view',
    tooltip:'以图表方式查看文件',
    handler:function ()
    {
     viewtabpanel.layout.setActiveItem(0);
     showview=0;
    }
   },
   {
    xtype:'tbseparator'
   },
   {
    xtype:'button',
    iconCls:'icon_list',
    tooltip:'以列表清单方式查看文件',
    handler:function ()
    {
     viewtabpanel.layout.setActiveItem(1);
     showview=1;
    }
   },
   {
    xtype:'tbseparator'
   },
   {
    xtype:'button',
    text:"新增",
    iconCls:'icon_add',
    handler:Addfiles
   },
   {
    xtype:'tbseparator'
   },
   {
    xtype:'button',
    text:"查看文件",
    tooltip:'查看文件',
    iconCls:'icon_Pages',
    handler:ViewCheckFile
   },
   {
    xtype:'tbseparator'
   },
   {
    xtype:'button',
    text:"编辑",
    iconCls:'icon_edit',
    handler:EditViewCheckFile
   },
   {
    xtype:'tbseparator'
   },
   {
    xtype:'button',
    text:"删除",
    iconCls:'icon_delete',
    tooltip:'从服务器将该文件删除',
    handler:DelUploadCheckFiles
   },
   {
    xtype:'tbseparator'
   },
   {
    xtype:'tbsplit',
    text:"查询数据",
    iconCls:'icon_search',
    handler:function ()
    {
    },
    menu:
    {
     items:[
     {
      text:'所有数据',
      iconCls:'icon_list',
      handler:_clearsearch
     },
     {
      text:'按条件查询',
      iconCls:'icon_list',
      handler:_addsearch
     }
     ]
    }
   },
   {
    xtype:'tbfill'
   },
   {
    xtype:'button',
    text:"排序",
    iconCls:"icon_delete"
   },
   {
    xtype:'tbseparator'
   },
   {
    xtype:'button',
    text:"统计",
    iconCls:"icon_piechart"
   },
   {
    xtype:'tbseparator'
   }
   ]
  }),
  items:viewtabpanel
 }
 );
 ds.load(
 {
  params:
  {
   start:start,
   limit:limit
  }
 });
DataView和GridPanel共用一个Ds和PagingToolbar。