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。