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。


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript写的windows资源管理器<br>解压运行scripting.html,在IE6.0打开(不能单独打开view.html这是一个子页面,必须由父页面调用)即可。<br>首发地址为51aspx<br>该源码在www.51aspx.com发布<br>本javascript程序是我自己利用业余时间做的,主要是编写javascript进一步对其进行控制。<br>因为时间的关系只提供了局部份功能,还有很多代码和函数都没有进行优化,(注释也较少)比如错误处理,浏览器嗅探等。<br>这里需要说明的是很少用到了innerHTML和innerTEXT两个方法,这是微软提供的专利方法,还没有得到W3C的认可,<br>在别的浏览器里面这两个方法不一定会被支持。<br>所以很多地方是用了DOM的方式进行处理。<br>首次的功能有:<br>1.查看磁盘,显示磁盘各种信息,显示磁盘占用率(图片)。<br>2.查看文件夹,文件,运行文件。<br>功能不是最重要的,本功能在windows资源管理器都能轻易做到,相信没人用这个做资源管理器吧,呵呵~~<br>主要是为了让javascript,DOM,CSS良好的呈现一种网页组织,真正的使<br>“结构”,“行为”,“样式”三者在(x)html里面完全分离开来。<br>着重使用了DOM模型编程。<br>javascript方面主要就是程序设计与功能的实现,主要还是用到了Scripting组件。<br>CSS就随便写了一点,反正2个页面,不过用的都是常用的一些属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值